相机控制器-02

来源：互联网发布：逛淘宝费流量多少编辑：程序博客网时间：2024/05/18 03:54

前言

根据demo例子进行说明

1.相机控制器扩展库位置：

three.js-master\three.js-master\examples\js\controls

2.将相机加入到相机控制器

var controls=new THREE.OrbitControls(camera);

以OrbitControls.js相机控制库为例

3.添加环境光让背景亮一点

scene.add(new THREE.AmbientLight(0x333333));
4.添加事件监听
controls.addEventListener("change",render);

5.完整代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>threejs--demo001</title>    <script src="../js/three.js"></script>    <script src="../js/OrbitControls.js"></script></head><body>    <script>        //第一步创建场景元素        var scene=new THREE.Scene();        //第二步创建一个网格模型对象  网格对象方法function Mesh( geometry, material )        //需要两个参数geometry几何模型  material材质        var geometry=new THREE.BoxGeometry(100,100,100);//立方体模型        var material=new THREE.MeshLambertMaterial({color:0xff0000});        var mesh=new THREE.Mesh(geometry,material);        scene.add(mesh);//添加网格到场景中        //添加灯光  点光源        var light=new THREE.PointLight(0xff0000);        light.position.set(300,400,200);//光源的位置        scene.add(light);//将光源加入到场景中        scene.add(new THREE.AmbientLight(0x333333));//添加环境光  让背景 亮一点        //添加相机  透视相机        var camera=new THREE.PerspectiveCamera(40,800/600,1,1000);        camera.position.set(200,200,200);//相机的位置        camera.lookAt(scene.position);//相机朝向的位置        //添加渲染器        var renderer=new THREE.WebGLRenderer();        renderer.setSize(800,600);        //将渲染器加到文档中        document.body.appendChild(renderer.domElement);        function render() {            renderer.render(scene,camera);        }        render();//刚加载页面的时候就渲染一次  要不刚进入页面背景会是黑色的        //将相机加入到相机控制        var controls=new THREE.OrbitControls(camera);//不传参数默认是整个文档        //添加事件监听        controls.addEventListener("change",render);  //当事件改变 触发render方法 渲染界面    </script></body></html>

阅读全文

0 0

相机控制器-02

前言

1.相机控制器扩展库位置：

2.将相机加入到相机控制器

3.添加环境光 让背景 亮一点

4.添加事件监听

5.完整代码

3.添加环境光让背景亮一点