专栏首页山河木马three.js 学习感悟

three.js 学习感悟

1.场景

在Three.js中添加的物体都是添加到场景中的,因此它相当于一个大容器。一般说,场景来没有很复杂的操作,在程序最开始的时候进行实例化,然后将物体添加到场景中即可。

2.照相机

我们使用Three.js创建的场景是三维的,而通常情况下显示屏是二维的,那么三维的场景如何显示到二维的显示屏上呢?照相机就是这样一个抽象,它定义了三维空间到二维屏幕的投影方式,用“照相机”这样一个类比,可以使我们直观地理解这一投影方式。

3.渲染器

渲染器将和Canvas元素进行绑定,用于渲染三维场景。用通俗的话来说,渲染就是将模型数据在屏幕上显示出来的过程。

静止的立方体的例子

(function () {
//声明一个渲染器(用于展示)
var renderer2 = new THREE.WebGLRenderer();
renderer2.setSize(400,300);
document.getElementsByTagName('body')[0].appendChild(renderer2.domElement);
renderer2.setClearColor(0x000000);

//声明一个场景(添加的物体都在这个场景中)
var scene2 = new THREE.Scene();

//设置照相机(相当于眼睛)
var camera2 = new THREE.PerspectiveCamera(60, 400/300, 1, 1000);//透视投影照相机
camera2.position.set(1,1,5);
scene2.add(camera2);

//声明物体
var cube22 = new THREE.Mesh(new THREE.CubeGeometry(2,2,2),
    new THREE.MeshBasicMaterial({
        color: 0xff0000,
        map: THREE.ImageUtils.loadTexture('img/11.png',{},function () {
            renderer2.render(scene2,camera2);
        })
    })
);
cube22.position.set(1,1,1);
cube22.lookAt(new THREE.Vector3(0,0,0));
scene2.add(cube22);

//设置光源
var light2 = new THREE.PointLight(0xffffff,2,100);
light2.position.set(0,0,5);
scene2.add(light2);

//场景,照相机,物体都声明好了,现在要用渲染器渲染出结果了
renderer2.render(scene2,camera2);
})()

能动的正方体例子

(function () {
//声明渲染器
var renderer3 = new THREE.WebGLRenderer();
renderer3.setSize(400,300);
document.getElementsByTagName('body')[0].appendChild(renderer3.domElement);
renderer3.setClearColor(0x000000);

//声明一个场景(添加的物体都在这个场景中)
var scene3 = new THREE.Scene();

//设置照相机(相当于眼睛)
var camera3 = new THREE.PerspectiveCamera(60, 400/300, 1, 1000);//透视投影照相机
camera3.position.set(0,0,5);
scene3.add(camera3);

//声明物体
var cube32 = new THREE.Mesh(new THREE.CubeGeometry(2,2,2),
    new THREE.MeshBasicMaterial({
        color: 0xff0000,
        map: THREE.ImageUtils.loadTexture('img/11.png',{},function () {
            renderer3.render(scene3,camera3);
        })
    })
);
cube32.lookAt(new THREE.Vector3(0,0,0));
scene3.add(cube32);

//设置光源
var light3 = new THREE.PointLight(0xffffff,2,100);
light3.position.set(0,0,5);
scene3.add(light3);

//场景,照相机,物体都声明好了,现在要用渲染器渲染出结果了
renderer3.render(scene3,camera3);

//动画
function draw() {
    cube32.rotation.x += Math.sin(Math.random()*0.05);
    cube32.rotation.y += Math.sin(Math.random()*0.05);
    renderer3.render(scene3,camera3);
    requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
})()

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ECMASCript 2019可能会有哪些特性?

    为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

    Fundebug
  • JavaScript 是如何工作: Shadow DOM 的内部结构+如何编写独立的组件!

    Web Components 是一套不同的技术,允许你创建可重用的定制元素,它们的功能封装在你的代码之外,你可以在 Web 应用中使用它们。

    前端小智@大迁世界
  • 如何正确合理使用 JavaScript async/await !

    ES8 引入的 async/await 在 JavaScript 的异步编程中是一个极好的改进。它提供了使用同步样式代码异步访问 resoruces 的方式,而...

    前端小智@大迁世界
  • 提高 JavaScript 开发效率的高级 VSCode 扩展之二!

    作为一名业余爱好者、专业人员,甚至是每月只有一次编程的开发人员,你必须知道,对于任何愿意在工作中投入最大生产时间的人来说,拥有智能和敏捷的工具是至关重要的,废话...

    前端小智@大迁世界
  • JavaScript是如何工作的:渲染引擎和优化其性能的技巧

    当你构建 Web 应用程序时,你不只是编写单独运行的 JavaScript 代码,你编写的 JavaScript 正在与环境进行交互。了解这种环境,它的工作原理...

    前端小智@大迁世界
  • Config::IniFiles模块的安装

    ``` {.brush:xml .;toolbar: .true; .auto-links: .false;} perl -MCPAN -e 'install...

    明哥的运维笔记
  • JavaScript是如何工作的:存储引擎+如何选择合适的存储API

    在设计 Web 应用程序时,为本地浏览器选择合适的存储机制至关重要, 一个好的存储引擎可以确保可靠地保存信息,减少带宽,提高响应能力。正确的存储缓存策略是实现离...

    前端小智@大迁世界
  • JavaScript 是如何工作的:深入网络层 + 如何优化性能和安全

    正如在上一篇关于 渲染引擎 的博客文章中提到的,我们认为优秀的 JavaScript 开发人员和杰出的 JavaScript 开发人员之间的区别在于,后者不仅理...

    前端小智@大迁世界
  • ES6迭代器的简单指南和示例

    我们将在本文中分析迭代器。迭代器是在JavaScript中循环任何集合的一种新方法。它们是在ES6中引入的,由于它们的广泛用途和在不同地方的使用而变得非常流行。

    前端小智@大迁世界
  • js 获取url 传值 参数

    ``` {.brush:html;toolbar: .true; .auto-links: .false;} <script language="JavaSc...

    明哥的运维笔记

扫码关注云+社区

领取腾讯云代金券