threejs_r132.加载obj模型示例

web/JavaScript threejs_r132.加载obj模型示例

[div id = "box" /]
[script type = "module"]
let box = document.getElementById("box");
box.width = 700;
box.height = 500;
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() {
    create3d();
};
class ImageActor {
    constructor(scence) {
        this.scence = scence;
        this.geometry = new THREE.BoxGeometry(100, 100, 100); //立方体
    }
    intoScence() {
        let that = this;
        var ImageLoader = new THREE.ImageLoader();
        ImageLoader.load('https://github.com/mrdoob/three.js/blob/dev/examples/files/arkit.png', function(img) {
            // image对象作为参数，创建一个纹理对象Texture
            var texture = new THREE.Texture(img);
            // 下次使用纹理时触发更新
            texture.needsUpdate = true;
            var material = new THREE.MeshLambertMaterial({
                map: texture, //设置纹理贴图
            });
            let mesh = new THREE.Mesh(that.geometry, material); //网格模型对象Mesh
            that.scence.add(mesh);
        });
    }
}
class ObjActor {
    constructor(scene) {
        this.scene = scene;
    }
    progress(xhr) {
        if (xhr.lengthComputable) {
            const percentComplete = xhr.loaded / xhr.total * 100;
            console.log(Math.round(percentComplete, 2) + '% downloaded');
        }
    }
    error(err) {
        console.error(err);
    }
    intoScence() {
        let that = this;
        // 模型来自 https://github.com/mrdoob/three.js/tree/dev/examples/models/obj/male02 
        new THREE.MTLLoader().load('https://github.com/mrdoob/three.js/tree/dev/examples/models/obj/male02 /male02.mtl', function(materials) {
            materials.preload();
            new THREE.OBJLoader().setMaterials(materials).load('https://github.com/mrdoob/three.js/tree/dev/examples/models/obj/male02/male02.obj', function(object) {
                object.position.y = -95;
                that.scene.add(object);
            }, that.progress, that.error);
        });
    }
}
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) {
        // 透视投影相机设置
        // fov = 50, 能够看到的角度范围，一般60-90
        // aspect = 1, 渲染窗口的长宽比，如果一个网页上只有一个全屏的canvas画布且画布上只有一个窗口，那么aspect的值就是网页窗口客户区的宽高比
        // near = 0.1, 从距离相机多远的位置开始渲染，最近可视距离。视力生效的最近点
        // far = 2000 距离相机多远的位置截止渲染。最远可视距离。
        this.camera = new THREE.PerspectiveCamera(60, box.width / box.height);
        this.camera.position.set(x, y, z); //设置相机位置
        this.camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    }
    setPosition(x, y, z) {
        this.camera.position.set(x, y, z); //设置相机位置
    }
}
class Cinema {
    constructor(scene, camera, width = box.width, height = box.height, bkg_color = 0x7c8577) {
        this.scene = scene;
        this.camera = camera;
        // 创建渲染器对象
        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setSize(width, height); // 设置渲染区域尺寸
        this.renderer.setClearColor(bkg_color); // 设置背景颜色
        box.appendChild(this.renderer.domElement); //body元素中插入canvas对象
    }
    play() { // 执行渲染
        this.renderer.render(this.scene, this.camera); // 场景、相机
        requestAnimationFrame(this.play.bind(this)); // 再次执行 play()
    }
}

function create3d() {
    var scene = new THREE.Scene();
    // let imgActor = new ImageActor(scene);
    // imgActor.intoScence();
    let objActor = new ObjActor(scene);
    objActor.intoScence();
    let lightManager = new LightManager(scene);
    lightManager.addAmbientLight(0xffffff);
    lightManager.addDirrectionalLight(100, 50, 50, 0xffffff);
    let cameraManager = new CameraManager(scene);
    cameraManager.setPosition(-100, 60, 180);
    let cinema = new Cinema(scene, cameraManager.camera);
    cinema.play();
    let controls = new THREE.OrbitControls(cameraManager.camera, cinema.renderer.domElement); // 创建控件对象
}
[/scrip]

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

[div id = "box" /]

[script type = "module"]

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

box.width = 700;

box.height = 500;

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() {

create3d();

};

class ImageActor {

constructor(scence) {

this.scence = scence;

this.geometry = new THREE.BoxGeometry(100, 100, 100); //立方体

}

intoScence() {

let that = this;

var ImageLoader = new THREE.ImageLoader();

ImageLoader.load('https://github.com/mrdoob/three.js/blob/dev/examples/files/arkit.png', function(img) {

// image对象作为参数，创建一个纹理对象Texture

var texture = new THREE.Texture(img);

// 下次使用纹理时触发更新

texture.needsUpdate = true;

var material = new THREE.MeshLambertMaterial({

map: texture, //设置纹理贴图

});

let mesh = new THREE.Mesh(that.geometry, material); //网格模型对象Mesh

that.scence.add(mesh);

});

}

class ObjActor {

constructor(scene) {

this.scene = scene;

}

progress(xhr) {

if (xhr.lengthComputable) {

const percentComplete = xhr.loaded / xhr.total * 100;

console.log(Math.round(percentComplete, 2) + '% downloaded');

}

error(err) {

console.error(err);

}

intoScence() {

let that = this;

// 模型来自 https://github.com/mrdoob/three.js/tree/dev/examples/models/obj/male02

new THREE.MTLLoader().load('https://github.com/mrdoob/three.js/tree/dev/examples/models/obj/male02 /male02.mtl', function(materials) {

materials.preload();

new THREE.OBJLoader().setMaterials(materials).load('https://github.com/mrdoob/three.js/tree/dev/examples/models/obj/male02/male02.obj', function(object) {

object.position.y = -95;

that.scene.add(object);

}, that.progress, that.error);

});

}

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) {

// 透视投影相机设置

// fov = 50, 能够看到的角度范围，一般60-90

// aspect = 1, 渲染窗口的长宽比，如果一个网页上只有一个全屏的canvas画布且画布上只有一个窗口，那么aspect的值就是网页窗口客户区的宽高比

// near = 0.1, 从距离相机多远的位置开始渲染，最近可视距离。视力生效的最近点

// far = 2000 距离相机多远的位置截止渲染。最远可视距离。

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

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

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

}

setPosition(x, y, z) {

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

}

class Cinema {

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

this.scene = scene;

this.camera = camera;

// 创建渲染器对象

this.renderer = new THREE.WebGLRenderer();

this.renderer.setSize(width, height); // 设置渲染区域尺寸

this.renderer.setClearColor(bkg_color); // 设置背景颜色

box.appendChild(this.renderer.domElement); //body元素中插入canvas对象

}

play() { // 执行渲染

this.renderer.render(this.scene, this.camera); // 场景、相机

requestAnimationFrame(this.play.bind(this)); // 再次执行 play()

}

function create3d() {

var scene = new THREE.Scene();

// let imgActor = new ImageActor(scene);

// imgActor.intoScence();

let objActor = new ObjActor(scene);

objActor.intoScence();

let lightManager = new LightManager(scene);

lightManager.addAmbientLight(0xffffff);

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

let cameraManager = new CameraManager(scene);

cameraManager.setPosition(-100, 60, 180);

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

cinema.play();

let controls = new THREE.OrbitControls(cameraManager.camera, cinema.renderer.domElement); // 创建控件对象

}

[/scrip]

- end

声明

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

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

RxJava示例代码：isEmpty判断无数据、contains判断包含数据、all判断每个数据true、any判断有数据true
aosp启动流程3-SecondStageMain
OpenCV和Java，Mat和Core
python3中的相同判断和拷贝