threejs_r132.自动环视示例

web/JavaScript threejs_r132.自动环视示例

[button id="openOrbitControlsBtn"]开启交互[/ button] 
[div id = "box" /]
[script type = "module"]

let box = document.getElementById("box");
    box.width = 700;
    box.height = 400;

    let three_script = document.createElement("script");
    three_script.src = "https://github.com/mrdoob/three.js/blob/dev/build/three.min.js";

    let head = document.getElementsByTagName("head")[0];
    head.appendChild(three_script);
    
    let controls;
    
    three_script.onload = function () {
        create3d();
    };

    class ObjActor {
        constructor(scene) {
            this.scene = scene;

            this.position_x = 0;
            this.position_y = -100;
            this.position_z = 0;

            let mesh = new THREE.Mesh(
                new THREE.PlaneGeometry(2000, 2000),
                new THREE.MeshPhongMaterial({color: 0x999999, depthWrite: false}));
            mesh.rotation.x = -Math.PI / 2;
            mesh.position.x = this.position_x;
            mesh.position.y = this.position_y;
            mesh.position.z = this.position_z;
            mesh.receiveShadow = true;
            this.scene.add(mesh);
            let grid = new THREE.GridHelper(2000, 20, 0xff0000, 0xff0000);
            grid.material.opacity = 0.2;
            grid.material.transparent = true;
            grid.position.x = this.position_x;
            grid.position.y = this.position_y;
            grid.position.z = this.position_z;
            this.scene.add(grid);
        }

        intoScence(mtl, obj) {
            let that = this;
            new THREE.MTLLoader()
                .load(
                    mtl,
                    function (materials) {
                        materials.preload();
                        new THREE.OBJLoader()
                            .setMaterials(materials)
                            .load(
                                obj,
                                function (object) {
                                    object.position.x = that.position_x;
                                    object.position.y = that.position_y;
                                    object.position.z = that.position_z;
                                    that.scene.add(object);
                                }
                            );
                    }
                );
        }
    }

    class LightManager {
        constructor(scene) {
            this.scene = scene;
        }
        addAmbientLight(color, intensity = 1) { // 添加环境光
            let ambient = new THREE.AmbientLight(color, intensity);
            this.scene.add(ambient);
        }
        addDirrectionalLight(x, y, z, color, intensity = 1) { // 添加平行光
            let directionalLight = new THREE.DirectionalLight(color, intensity);
            directionalLight.position.set(x, y, z); // 设置光源的方向
            this.scene.add(directionalLight);
        }
    }

    class CameraManager {
        constructor(scene, x = 0, y = 0, z = 0) {
            this.camera = new THREE.PerspectiveCamera(60, box.width / box.height);
            this.camera.position.set(x, y, z);  // 相机位置
            this.camera.lookAt(scene.position); // 相机方向(指向的场景对象)
        }
    }

    class Cinema {
        constructor(scene, camera, width = box.width, height = box.height) {
            this.scene = scene;
            this.camera = camera;

            this.renderer = new THREE.WebGLRenderer();
            this.renderer.setSize(width, height);

            box.appendChild(this.renderer.domElement);

            this.Y_AXIS = new THREE.Vector3(0, 1, 0); // Y轴
            this.cameraBox = null; // 父容器
        }

        play() {
            this.renderer.render(this.scene, this.camera);
            requestAnimationFrame(this.play.bind(this)); // 循环执行play()

            if (null !== this.cameraBox) {
                this.cameraBox.rotateOnAxis( // cameraBox自身旋转。其内部的camera跟随运动，产生环视效果
                    this.Y_AXIS, // axis  绕哪个轴旋转
                    0.01);       // angle 旋转角度
            }
        }

        roll() {
            this.cameraBox = new THREE.Object3D(); // 父容器
            this.scene.add(this.cameraBox);        // 添加后，cameraBox默认位于scene的原点

            this.cameraBox.add(this.camera);       // 作为相机的容器

            this.camera.position.set(300, 0, 0);         // 相机相对于cameraBox的位置
            this.camera.lookAt(this.cameraBox.position); // 相机看向cameraBox的原点
        }
    }

    function create3d() {
        let scene = new THREE.Scene();

        let lightManager = new LightManager(scene);
        lightManager.addAmbientLight(0xffffff);
        lightManager.addDirrectionalLight(100, 50, 50, 0xffffff);

        let cameraManager = new CameraManager(scene);

        let cinema = new Cinema(scene, cameraManager.camera);
        cinema.play();
        cinema.roll();

        controls = new THREE.OrbitControls(cameraManager.camera, cinema.renderer.domElement);
        controls.enabled = false; // 进制鼠标交互

        let objActor = new ObjActor(scene);
        objActor.intoScence(
            'https://github.com/mrdoob/three.js/tree/dev/examples/models/obj/male02/male02.mtl',
            'https://github.com/mrdoob/three.js/tree/dev/examples/models/obj/male02/male02.obj');
    }
    
    document.getElementById("openOrbitControlsBtn")
        .onclick = function () {
        controls.enabled = !controls.enabled;
        console.log(controls.enabled)
    };
[/scrip]

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

[button id="openOrbitControlsBtn"]开启交互[/ button]

[div id = "box" /]

[script type = "module"]

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

box.width = 700;

box.height = 400;

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

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

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

head.appendChild(three_script);

let controls;

three_script.onload = function () {

create3d();

};

class ObjActor {

constructor(scene) {

this.scene = scene;

this.position_x = 0;

this.position_y = -100;

this.position_z = 0;

let mesh = new THREE.Mesh(

new THREE.PlaneGeometry(2000, 2000),

new THREE.MeshPhongMaterial({color: 0x999999, depthWrite: false}));

mesh.rotation.x = -Math.PI / 2;

mesh.position.x = this.position_x;

mesh.position.y = this.position_y;

mesh.position.z = this.position_z;

mesh.receiveShadow = true;

this.scene.add(mesh);

let grid = new THREE.GridHelper(2000, 20, 0xff0000, 0xff0000);

grid.material.opacity = 0.2;

grid.material.transparent = true;

grid.position.x = this.position_x;

grid.position.y = this.position_y;

grid.position.z = this.position_z;

this.scene.add(grid);

}

intoScence(mtl, obj) {

let that = this;

new THREE.MTLLoader()

.load(

mtl,

function (materials) {

materials.preload();

new THREE.OBJLoader()

.setMaterials(materials)

.load(

obj,

function (object) {

object.position.x = that.position_x;

object.position.y = that.position_y;

object.position.z = that.position_z;

that.scene.add(object);

}

);

}

);

}

class LightManager {

constructor(scene) {

this.scene = scene;

}

addAmbientLight(color, intensity = 1) { // 添加环境光

let ambient = new THREE.AmbientLight(color, intensity);

this.scene.add(ambient);

}

addDirrectionalLight(x, y, z, color, intensity = 1) { // 添加平行光

let directionalLight = new THREE.DirectionalLight(color, intensity);

directionalLight.position.set(x, y, z); // 设置光源的方向

this.scene.add(directionalLight);

}

class CameraManager {

constructor(scene, x = 0, y = 0, z = 0) {

this.camera = new THREE.PerspectiveCamera(60, box.width / box.height);

this.camera.position.set(x, y, z); // 相机位置

this.camera.lookAt(scene.position); // 相机方向(指向的场景对象)

}

class Cinema {

constructor(scene, camera, width = box.width, height = box.height) {

this.scene = scene;

this.camera = camera;

this.renderer = new THREE.WebGLRenderer();

this.renderer.setSize(width, height);

box.appendChild(this.renderer.domElement);

this.Y_AXIS = new THREE.Vector3(0, 1, 0); // Y轴

this.cameraBox = null; // 父容器

}

play() {

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

requestAnimationFrame(this.play.bind(this)); // 循环执行play()

if (null !== this.cameraBox) {

this.cameraBox.rotateOnAxis( // cameraBox自身旋转。其内部的camera跟随运动，产生环视效果

this.Y_AXIS, // axis 绕哪个轴旋转

0.01); // angle 旋转角度

}

roll() {

this.cameraBox = new THREE.Object3D(); // 父容器

this.scene.add(this.cameraBox); // 添加后，cameraBox默认位于scene的原点

this.cameraBox.add(this.camera); // 作为相机的容器

this.camera.position.set(300, 0, 0); // 相机相对于cameraBox的位置

this.camera.lookAt(this.cameraBox.position); // 相机看向cameraBox的原点

}

function create3d() {

let scene = new THREE.Scene();

let lightManager = new LightManager(scene);

lightManager.addAmbientLight(0xffffff);

lightManager.addDirrectionalLight(100, 50, 50, 0xffffff);

let cameraManager = new CameraManager(scene);

let cinema = new Cinema(scene, cameraManager.camera);

cinema.play();

cinema.roll();

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

controls.enabled = false; // 进制鼠标交互

let objActor = new ObjActor(scene);

objActor.intoScence(

'https://github.com/mrdoob/three.js/tree/dev/examples/models/obj/male02/male02.mtl',

'https://github.com/mrdoob/three.js/tree/dev/examples/models/obj/male02/male02.obj');

}

document.getElementById("openOrbitControlsBtn")

.onclick = function () {

controls.enabled = !controls.enabled;

console.log(controls.enabled)

};

[/scrip]

- end

声明

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

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

Matplotlib可视化示例代码-2-绘制子图
aosp07-将LineageOS源码导入AndroidStudio
Android中自定义NumberPickerDialog
esp8266烧录MicroPython固件进行开发