threejs三维场景基本组成

web/JavaScript threejs三维场景基本组成

1.场景
2.相机
3.物体
4.场景渲染器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Babylon Template</title>
    <script src="../three.0.148.js"></script>
</head>
<body>
    <script>
        window.onload = function () {
            create3d();
        };

        function create3d() {
            // 1.场景
            let scene = new THREE.Scene();

            // 2.相机
            let fov = 75;                                        // 视野宽度-角度
            let aspect = window.innerWidth / window.innerHeight; // 视野宽高比
            let near = 1;                                        // 视觉近点
            let far = 1500;                                      // 视觉远点
            let camera = new THREE.PerspectiveCamera(fov, aspect, near, far); // 透视相机(人眼视觉习惯)
            camera.position.set(0, 1, 5); // 位置 x,y,z
            // camera.lookAt(0, 0, 0);    // 看向哪里 x,y,z
            scene.add(camera);

            // 3.物体
            let box = new THREE.BoxGeometry(1, 1, 1);                  // 几何体
            let mat = new THREE.MeshBasicMaterial({color: "#9083e3"}); // 材质
            let mesh = new THREE.Mesh(box, mat);                       // 三维物体
            scene.add(mesh);

            // 4.场景渲染器
            let renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight); // 渲染区域尺寸
            renderer.render(scene, camera);                 // 渲染场景，并基于相机的视角
            document.body.appendChild(renderer.domElement); // 渲染器的画布即1个canvas
        }
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Babylon Template</title>

</head>

<body>

window.onload = function () {

create3d();

};

function create3d() {

// 1.场景

let scene = new THREE.Scene();

// 2.相机

let fov = 75; // 视野宽度-角度

let aspect = window.innerWidth / window.innerHeight; // 视野宽高比

let near = 1; // 视觉近点

let far = 1500; // 视觉远点

let camera = new THREE.PerspectiveCamera(fov, aspect, near, far); // 透视相机(人眼视觉习惯)

camera.position.set(0, 1, 5); // 位置 x,y,z

// camera.lookAt(0, 0, 0); // 看向哪里 x,y,z

scene.add(camera);

// 3.物体

let box = new THREE.BoxGeometry(1, 1, 1); // 几何体

let mat = new THREE.MeshBasicMaterial({color: "#9083e3"}); // 材质

let mesh = new THREE.Mesh(box, mat); // 三维物体

scene.add(mesh);

// 4.场景渲染器

let renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight); // 渲染区域尺寸

renderer.render(scene, camera); // 渲染场景，并基于相机的视角

document.body.appendChild(renderer.domElement); // 渲染器的画布即1个canvas

}

</script>

</body>

</html>

进一步添加鼠标控制视图交互的效果：

function create3d() {
    // 1.场景
    let scene = new THREE.Scene();

    // 2.相机
    let fov = 75;
    let aspect = window.innerWidth / window.innerHeight;
    let near = 1;
    let far = 1500;
    let camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.set(0, 1, 5);
    scene.add(camera);

    // 3.物体
    let box = new THREE.BoxGeometry(1, 1, 1);
    let mat = new THREE.MeshBasicMaterial({color: "#9083e3"});
    let mesh = new THREE.Mesh(box, mat);
    scene.add(mesh);

    // 4.场景渲染器
    let renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 其它：轨道控制器
    let controls = new THREE.OrbitControls(camera, renderer.domElement);

    renderThreejs();

    // 轨道控制器须要持续刷新才可以看到交互效果
    function renderThreejs(){
        renderer.render(scene, camera);
        requestAnimationFrame(renderThreejs); // 浏览器调用指定的回调函数更新
    }
}

function create3d() {

// 1.场景

let scene = new THREE.Scene();

// 2.相机

let fov = 75;

let aspect = window.innerWidth / window.innerHeight;

let near = 1;

let far = 1500;

let camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

camera.position.set(0, 1, 5);

scene.add(camera);

// 3.物体

let box = new THREE.BoxGeometry(1, 1, 1);

let mat = new THREE.MeshBasicMaterial({color: "#9083e3"});

let mesh = new THREE.Mesh(box, mat);

scene.add(mesh);

// 4.场景渲染器

let renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

// 其它：轨道控制器

let controls = new THREE.OrbitControls(camera, renderer.domElement);

renderThreejs();

// 轨道控制器须要持续刷新才可以看到交互效果

function renderThreejs(){

renderer.render(scene, camera);

requestAnimationFrame(renderThreejs); // 浏览器调用指定的回调函数更新

}

- end

声明

本文由 cuiweiyou 原创，转载请注明出处：http://www.gaohaiyan.com/4152.html

承接App定制、企业web站点、办公系统软件设计开发，外包项目，毕设

Ubuntu10.04×64搭建Hadoop2.7.0×64分布式集群
Ubuntu10.04修改为默认root登陆
OpenCV和Java，PC交互操作-图片加载、质量修改、摄像头操作
aosp启动流程9-SystemUIService进入应用层