相机控制器-02

最新推荐文章于 2023-03-22 13:36:16 发布

githubshareing

最新推荐文章于 2023-03-22 13:36:16 发布

阅读量444

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_18377515/article/details/72710274

three.js 专栏收录该内容

4 篇文章

订阅专栏

前言

根据 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>