Three.js创建简单和复杂三维几何图、创建动画、移动物体、添加纹理材质并使用dat.GUI简化实验流程...-白红宇

Three.js创建简单和复杂三维几何图、创建动画、移动物体、添加纹理材质并使用dat.GUI简化实验流程...

阅读量：5230 次

发布时间：2019-06-14

本文共 3652 字，大约阅读时间需要 12 分钟。

初识Three

1.下面将创建第一个场景并添加物体和摄像机。

<!DOCTYPE html>

<html>

<head>

<title>My 002 Three.js app</title>

<style>

body { margin: 0; }

canvas { width: 100%; height: 100% }

</style>

</head>

<body>

// 设置全局变量

var scene, camera, renderer, controls, tween, door, stats, cube,sphere, gui;

//GUI库提供用户操作界面，控制动画参数

var controls = new function(){

this.rotationSpeed = 0.02;

this.bouncingSpeed = 0.03;

}

init();

window.addEventListener('resize', onResize, false);

function init(){

stats = initStats();

gui = new dat.GUI();

gui.add(controls, 'rotationSpeed', 0, 0.5);

gui.add(controls, 'bouncingSpeed', 0, 0.5);

//1.场景

scene = new THREE.Scene();

//2.相机

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

//3.渲染器

renderer = new THREE.WebGLRenderer();

//设置渲染器的大小为窗口的内宽度，也就是内容区的宽度。

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

renderer.setClearColor(0xEEEEEE, 1.0);

renderer.shadowMapEnabled = true;

//创建一个坐标轴

var axes = new THREE.AxisHelper();

scene.add(axes);

//设置光源

var spotLight = new THREE.SpotLight(0xffffff);

spotLight.position.set(-40, 60, -10);

spotLight.castShadow = true;

scene.add(spotLight);

//创建平面几何体

var planGeometry = new THREE.PlaneGeometry( 60,20,1,1);

var planMaterial = new THREE.MeshLambertMaterial( {color: 0xccccc} );

var plane = new THREE.Mesh( planGeometry, planMaterial );

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

plane.position.x = 15;

plane.position.y = 0;

plane.position.z = 0;

//是否投射阴影

plane.receiveShadow = true;

scene.add( plane );

//创建立方几何体

var cubeGeometry = new THREE.BoxGeometry( 4,4,4 );

var cubeMaterial = new THREE.MeshLambertMaterial( {color: 0x00ff00} );

cube = new THREE.Mesh( cubeGeometry, cubeMaterial );

cube.position.x = -4;

cube.position.y = 3;

cube.position.z = 0;

//是否投射阴影

cube.castShadow = true;

scene.add( cube );

//创建球几何体

var sphereGeometry = new THREE.SphereGeometry( 4, 20, 20 );

var sphereMaterial = new THREE.MeshLambertMaterial( {color: 0x7777ff, wireframe: true} );

sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );

sphere.position.x = 20;

sphere.position.y = 4;

sphere.position.z = 2;

//是否投射阴影

sphere.castShadow = true;

scene.add( sphere );

camera.position.x = -30;

camera.position.y = 40;

camera.position.z = 30;

camera.lookAt(scene.position);

document.body.appendChild( renderer.domElement );

render();

}

// 渲染

var step = 0;

function render(){

stats.update();

step+=0.04;

requestAnimationFrame(render);

sphere.position.x = 20 + (10 *(Math.cos(step)));

sphere.position.y = 2 +(10 * Math.abs(Math.sin(step)));

cube.rotation.x += controls.rotationSpeed;

cube.rotation.y += controls.rotationSpeed;

renderer.render(scene,camera);

}

//显示每秒传输帧数

function initStats(){

var stats = new Stats();

//0: 检测每秒传输帧数fps; 1: 画面渲染时间。

stats.setMode(0);

stats.domElement.style.position = 'absolute';

stats.domElement.style.left = '0px';

stats.domElement.style.top = '0px';

document.getElementById("stats-output").appendChild( stats.domElement );

return stats;

}

//对浏览器大小的自适应

function onResize(){

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

camera.updateProjectionMatrix();

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

}

</script>

</body>

</html>

示例地址：http://114.116.34.95/three/test1/test-1.html

转载于:https://www.cnblogs.com/Mr-Zqd/p/10683054.html

你可能感兴趣的文章

Nginx配置文件（nginx.conf）配置详解1

查看>>

linux php编译安装

查看>>

name phone email正则表达式

查看>>

721. Accounts Merge

查看>>

OpenCv-Python 图像处理基本操作

hihoCoder 1233 : Boxes（盒子）

查看>>

团队的绩效评估计划

查看>>

oracle中anyData数据类型的使用实例

查看>>

C++对vector里面的元素排序及取任意重叠区间

泰勒展开，傅里叶变换，拉普拉斯变换和Z变换的物理意义

查看>>

Java Concurrentmodificationexception异常原因和解决方法