threejs_r132.使用OrbitControls飞行视角示例

web/JavaScript threejs_r132.使用OrbitControls飞行视角示例

W、S、A、D 或上、下、左、右按键。

<canvas id="canvas"></canvas>
<script>
    let new_script = document.createElement("script");
    new_script.src = "https://github.com/mrdoob/three.js/blob/dev/build/three.min.js";
    let head = document.getElementsByTagName("head")[0];
    head.appendChild(new_script);

    new_script.onload = function () {
        let cinema = new Cinema();
        cinema.animate();
    };

    class Cinema {
        constructor() {
            this.camera = null;
            this.controls = null;
            this.scene = null;
            this.renderer = null;

            this.initScene();
            this.initWord();
            this.initLight();
            this.initCamera();
            this.initRenderer();
            this.initControls();
        }

        initScene() {
            this.scene = new THREE.Scene();
            this.scene.background = new THREE.Color("#cccccc");
            this.scene.fog = new THREE.Fog("#cccccc", 1, 1000);
        }

        initWord() {
            // 添加一个平面模拟地面
            const planeGeo = new THREE.PlaneGeometry(2000, 2000);
            const planeMat = new THREE.MeshPhongMaterial({color: "#305509"});
            const plane = new THREE.Mesh(planeGeo, planeMat);
            plane.position.y = -1;
            plane.rotation.x = Math.PI * -0.5;
            this.scene.add(plane);
            // 山体
            const geometry = new THREE.CylinderGeometry(0, 10, 30, 4, 1);
            const material = new THREE.MeshPhongMaterial({color: "#ffffff", flatShading: true});
            for (let i = 0; i < 500; i++) {
                const mesh = new THREE.Mesh(geometry, material);
                mesh.position.x = Math.random() * 2000 - 1000;
                mesh.position.y = 0;
                mesh.position.z = Math.random() * 2000 - 1000;
                mesh.updateMatrix();
                mesh.matrixAutoUpdate = false;
                this.scene.add(mesh);
            }
        }

        initLight() {
            const dirLight1 = new THREE.DirectionalLight("#cc0fff");
            dirLight1.position.set(60, 10, -50);
            const dirLight2 = new THREE.DirectionalLight("#0cccff");
            dirLight2.position.set(-35, 20, 20);
            const ambientLight = new THREE.AmbientLight("#ffffff");
            this.scene.add(dirLight1);
            this.scene.add(dirLight2);
            this.scene.add(ambientLight);
        }

        initCamera() {
            this.camera = new THREE.PerspectiveCamera();
            this.camera.position.set(400, 200, 0); // 视窗的初始视角
        }

        initRenderer() {
            let canvas = document.getElementById("canvas");
            canvas.width = 750;
            canvas.height = 300;
            this.renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true}); // antialias抗锯齿
            //this.renderer.setPixelRatio(window.devicePixelRatio); // 当前显示设备的物理像素分辨率与CSS像素分辨率之比。设置此项会使canvas显示的宽高翻倍
            this.renderer.setSize(canvas.width, canvas.height);
        }

        initControls() {
            // 太空轨道视角控制器
            this.controls = new THREE.OrbitControls(this.camera, canvas);
            this.controls.listenToKeyEvents(window); // 【重要】注册按键监听事件
            this.controls.enableDamping = true; // 开启按键控视窗平行位移
            this.controls.dampingFactor = 1;    // 位移速度
            this.controls.screenSpacePanning = false; // 右键拖放时视窗  true平移，false缩放
            this.controls.minDistance = 100; // 滚轮控制视窗拉近的最小距离
            this.controls.maxDistance = 500; // 滚轮控制视窗推远的最大距离

            // 左键拖动时视窗垂直方向的最小旋转角度。
            // 0为上帝角度，垂直90度俯视看向地面。
            // Math.PI为撒旦角度，垂直-90度仰视看向地面
            this.controls.minPolarAngle = 0; // 默认0

            // 左键拖动时视窗垂直方向的最大旋转角度。Math.PI/2 为地平线视角
            this.controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到撒旦视角。

            /* minPolarAngle=0 和 maxPolarAngle=Math.PI/2 使'玩家'只能在地面上和空中活动 */
        }

        animate() {
            this.controls.update(); // 当controls.enableDamping=true或者controls.autoRotate=true时调用
            this.renderer.render(this.scene, this.camera);
            requestAnimationFrame(this.animate.bind(this));
        }
    }
</script>

100

101

102

103

104

105

106

107

108

let new_script = document.createElement("script");

new_script.src = "https://github.com/mrdoob/three.js/blob/dev/build/three.min.js";

let head = document.getElementsByTagName("head")[0];

head.appendChild(new_script);

new_script.onload = function () {

let cinema = new Cinema();

cinema.animate();

};

class Cinema {

constructor() {

this.camera = null;

this.controls = null;

this.scene = null;

this.renderer = null;

this.initScene();

this.initWord();

this.initLight();

this.initCamera();

this.initRenderer();

this.initControls();

}

initScene() {

this.scene = new THREE.Scene();

this.scene.background = new THREE.Color("#cccccc");

this.scene.fog = new THREE.Fog("#cccccc", 1, 1000);

}

initWord() {

// 添加一个平面模拟地面

const planeGeo = new THREE.PlaneGeometry(2000, 2000);

const planeMat = new THREE.MeshPhongMaterial({color: "#305509"});

const plane = new THREE.Mesh(planeGeo, planeMat);

plane.position.y = -1;

plane.rotation.x = Math.PI * -0.5;

this.scene.add(plane);

// 山体

const geometry = new THREE.CylinderGeometry(0, 10, 30, 4, 1);

const material = new THREE.MeshPhongMaterial({color: "#ffffff", flatShading: true});

for (let i = 0; i < 500; i++) {

const mesh = new THREE.Mesh(geometry, material);

mesh.position.x = Math.random() * 2000 - 1000;

mesh.position.y = 0;

mesh.position.z = Math.random() * 2000 - 1000;

mesh.updateMatrix();

mesh.matrixAutoUpdate = false;

this.scene.add(mesh);

}

initLight() {

const dirLight1 = new THREE.DirectionalLight("#cc0fff");

dirLight1.position.set(60, 10, -50);

const dirLight2 = new THREE.DirectionalLight("#0cccff");

dirLight2.position.set(-35, 20, 20);

const ambientLight = new THREE.AmbientLight("#ffffff");

this.scene.add(dirLight1);

this.scene.add(dirLight2);

this.scene.add(ambientLight);

}

initCamera() {

this.camera = new THREE.PerspectiveCamera();

this.camera.position.set(400, 200, 0); // 视窗的初始视角

}

initRenderer() {

let canvas = document.getElementById("canvas");

canvas.width = 750;

canvas.height = 300;

this.renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true}); // antialias抗锯齿

//this.renderer.setPixelRatio(window.devicePixelRatio); // 当前显示设备的物理像素分辨率与CSS像素分辨率之比。设置此项会使canvas显示的宽高翻倍

this.renderer.setSize(canvas.width, canvas.height);

}

initControls() {

// 太空轨道视角控制器

this.controls = new THREE.OrbitControls(this.camera, canvas);

this.controls.listenToKeyEvents(window); // 【重要】注册按键监听事件

this.controls.enableDamping = true; // 开启按键控视窗平行位移

this.controls.dampingFactor = 1; // 位移速度

this.controls.screenSpacePanning = false; // 右键拖放时视窗 true平移，false缩放

this.controls.minDistance = 100; // 滚轮控制视窗拉近的最小距离

this.controls.maxDistance = 500; // 滚轮控制视窗推远的最大距离

// 左键拖动时视窗垂直方向的最小旋转角度。

// 0为上帝角度，垂直90度俯视看向地面。

// Math.PI为撒旦角度，垂直-90度仰视看向地面

this.controls.minPolarAngle = 0; // 默认0

// 左键拖动时视窗垂直方向的最大旋转角度。Math.PI/2 为地平线视角

this.controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到撒旦视角。

/* minPolarAngle=0 和 maxPolarAngle=Math.PI/2 使'玩家'只能在地面上和空中活动 */

}

animate() {

this.controls.update(); // 当controls.enableDamping=true或者controls.autoRotate=true时调用

this.renderer.render(this.scene, this.camera);

requestAnimationFrame(this.animate.bind(this));

}

</script>

要支持ASWD按键，要在OrbitControls的handleKeyDown方法中添加按键代码：


function handleKeyDown(event) {
    let needsUpdate = false;
    switch (event.code) {
        case scope.keys.UP:
            pan(0, scope.keyPanSpeed);
            needsUpdate = true;
            break;
        case "KeyW":
            pan(0, scope.keyPanSpeed);
            needsUpdate = true;
            break;
        case scope.keys.BOTTOM:
            pan(0, -scope.keyPanSpeed);
            needsUpdate = true;
            break;
        case "KeyS":
            pan(0, -scope.keyPanSpeed);
            needsUpdate = true;
            break;
        case scope.keys.LEFT:
            pan(scope.keyPanSpeed, 0);
            needsUpdate = true;
            break;
        case "KeyA":
            pan(scope.keyPanSpeed, 0);
            needsUpdate = true;
            break;
        case scope.keys.RIGHT:
            pan(-scope.keyPanSpeed, 0);
            needsUpdate = true;
            break;
        case "KeyD":
            pan(-scope.keyPanSpeed, 0);
            needsUpdate = true;
            break;
    }
    if (needsUpdate) {
        // prevent the browser from scrolling on cursor keys
        event.preventDefault();
        scope.update();
    }
}</script>

function handleKeyDown(event) {

let needsUpdate = false;

switch (event.code) {

case scope.keys.UP:

pan(0, scope.keyPanSpeed);

needsUpdate = true;

break;

case "KeyW":

pan(0, scope.keyPanSpeed);

needsUpdate = true;

break;

case scope.keys.BOTTOM:

pan(0, -scope.keyPanSpeed);

needsUpdate = true;

break;

case "KeyS":

pan(0, -scope.keyPanSpeed);

needsUpdate = true;

break;

case scope.keys.LEFT:

pan(scope.keyPanSpeed, 0);

needsUpdate = true;

break;

case "KeyA":

pan(scope.keyPanSpeed, 0);

needsUpdate = true;

break;

case scope.keys.RIGHT:

pan(-scope.keyPanSpeed, 0);

needsUpdate = true;

break;

case "KeyD":

pan(-scope.keyPanSpeed, 0);

needsUpdate = true;

break;

}

if (needsUpdate) {

// prevent the browser from scrolling on cursor keys

event.preventDefault();

scope.update();

}

}</script>

- end

声明

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

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

Java标准输入输出、字节流与字符流转换器、改变标准输入输出进行文件复制、日志输出
aosp08-应用源码编译
Arduino继电器操作示例
物联网的几种方案