html 制作人物模型,box.html · 啦啦嘿/threejs模型星空和人物模型 - Gitee.com

My first three.js app

body { margin: 0; }

canvas { display: block; }

// 连个小盒嵌套

// 场景

var scene = new THREE.Scene();

// 相机

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

// 光，没有光反射光的材质看不见，黑乎乎一片

var ambientLight = new THREE.AmbientLight( 0xffffff, 1 );

scene.add( ambientLight );

var pointLight = new THREE.PointLight( 0xffffff, 1 );

camera.add( pointLight );

scene.add( camera );

// 渲染器

var renderer = new THREE.WebGLRenderer({ antialias: true});

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

document.body.appendChild( renderer.domElement );

var textureLoader = new THREE.TextureLoader();

var boxTexture = textureLoader.load('box.jpg')

// 几何结构

var geometry = new THREE.BoxGeometry(1,1,1);

// 材质

var material = new THREE.MeshBasicMaterial( { map: boxTexture, side: THREE.DoubleSide} );

// 正方体、网格

var cube = new THREE.Mesh( geometry, material );

cube.name = "box"

// default (0,0,0)

scene.add( cube );

// 一面一个材质

envirmentBox = new THREE.BoxGeometry(200, 200, 200);

envirmentBoxList = [

new THREE.MeshBasicMaterial( { map: textureLoader.load('skybox/rt.png'), side: THREE.DoubleSide} ),

new THREE.MeshBasicMaterial( { map: textureLoader.load('skybox/lf.png'), side: THREE.DoubleSide} ),

new THREE.MeshBasicMaterial( { map: textureLoader.load('skybox/up.png'), side: THREE.DoubleSide} ),

new THREE.MeshBasicMaterial( { map: textureLoader.load('skybox/dn.png'), side: THREE.DoubleSide} ),

new THREE.MeshBasicMaterial( { map: textureLoader.load('skybox/bk.png'), side: THREE.DoubleSide} ),

new THREE.MeshBasicMaterial( { map: textureLoader.load('skybox/ft.png'), side: THREE.DoubleSide} ),

];

envirmentTexture = new THREE.Mesh( envirmentBox, envirmentBoxList )

envirmentTexture.name = "skybox"

scene.add( envirmentTexture )

// 相机往上移动

camera.position.z = 5;

// 鼠标操作相机 args 相机，渲染元素

new THREE.OrbitControls(camera, renderer.domElement);

// 需要循环渲染场景

function animate() {

requestAnimationFrame( animate );

box = scene.getObjectByName("box")

// box.rotation.x += 0.01

// box.rotation.y += 0.01

// box.rotation.z += 0.01

skybox = scene.getObjectByName("skybox")

// skybox.rotation.y += 0.001

renderer.render( scene, camera );

}

animate();

// window.requestAnimationFrame(()=>renderer.render(scene, camera));

window.addEventListener("resize", () => {renderer.setSize( window.innerWidth, window.innerHeight);

camera.aspect = window.innerWidth/window.innerHeight;

camera.updateProjectionMatrix();

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史