-
initThree() ------ JS渲染器
-
initCamera() ---- 相机
-
initScene() -------场景
-
initLight() -------- 灯光
-
initObject() -------物体
- initGrid() ----------网格 -
animation() ------ 开始渲染动画
-
stats -------性能插件
-
OrbitControls ------控制器
-
camera.updateProjectionMatrix();窗口变动触发的函数
//创建鼠标控件对象 相机对象camera作为参数 控件可以监听鼠标的变化，改变相机对象的属性 var controls = new THREE.OrbitControls(camera); //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果 controls.addEventListener('change', render);
默认网格
function initGrid(){
var helper = new THREE.GridHelper( 1000, 50 );
// helper.setColors( 0x0000ff, 0x808080 );
scene.add( helper );
}
渲染到div画布上
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias : true
});
// 设置renderer画布的大小为div的宽高
renderer.setSize(width, height);
// 把画布设置到div的内部，不透明
document.getElementById('canvas-frame').appendChild(renderer.domElement);
// 设置画布初始化的颜色为白色
renderer.setClearColor(0xFFFFFF, 1.0);
// 性能监控
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById('canvas-frame').appendChild(stats.domElement);
}
// 渲染到某个div
//初始化渲染器
function initThree(){
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
//给渲染器添加阴影效果 add shadow -01
renderer.shadowMap.enabled=true;
renderer.shadowMap.type=THREE.BasicShadowMap;
document.body.appendChild(renderer.domElement);
}
相机
//透视相机
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.x = 100;
camera.position.y = 300;
camera.position.z = 600;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
场景
var scene;
function initScene() {
scene = new THREE.Scene();
//辅助工具
var helper = new THREE.AxesHelper(1000);
scene.add(helper);
}
设置环境光
var light;
function initLight() {
light = new THREE.AmbientLight(0xFF0000);
light.position.set(100, 100, 200);
scene.add(light);
}
物体
var cube;
var mesh;
function initObject() {
// 立方体
var geometry = new THREE.BoxGeometry( 200, 100, 100 );
for ( var i = 0; i < geometry.faces.length; i += 2 ) {
var hex = Math.random() * 0xffffff;
geometry.faces[ i ].color.setHex( hex );
geometry.faces[ i + 1 ].color.setHex( hex );
}
// 设置材质
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
mesh = new THREE.Mesh( geometry,material);
mesh.position = new THREE.Vector3(0,0,0);
// group= new THREE.Group()
// group.add(mesh)
// -------
// scene.add(group)
// 将物体移动特定的距离
// mesh.translateX(-50);
// mesh.translateY(-50);
// mesh.translateZ(50);
scene.add(mesh);
}
开始渲染动画
// 帧循环、游戏循环
function animation(){
//缩放
// scale.y（0.5）
// mesh.rotation.y +=0.01;
// mesh.rotateY(0.01);
// 弧度和角度的转换 x * 180° / Π
// 以立方体上的点50，50，-50为中心，绕y轴旋转
// 实现方式是将物体先平移至指定的位置后进行旋转
// 让物体根据设定的向量进行旋转
// var v1 = new THREE.Vector3(0,-1,0);
// mesh.rotateOnAxis(v1,0.01);
renderer.render(scene, camera);
requestAnimationFrame(animation);
}
位置音频和非位置音频
// 非位置音频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-非位置音频</title>
<style>
body {
margin: 0;
overflow: hidden;
/* 隐藏body窗口区域滚动条 */
}
</style>
<!--引入three.js三维引擎-->
<script src="../js/three.js"></script>
</head>
<body>
<script>
// 非位置音频可用于不考虑位置的背景音乐
var audio = null;
// 创建一个监听者
var listener = new THREE.AudioListener();
// camera.add( listener );
// 创建一个非位置音频对象 用来控制播放
audio = new THREE.Audio(listener);
// 创建一个音频加载器对象
var audioLoader = new THREE.AudioLoader();
// 加载音频文件，返回一个音频缓冲区对象作为回调函数参数
audioLoader.load('./audio/幸福的早晨.mp3', function(AudioBuffer) {
// console.log(AudioBuffer)
// 音频缓冲区对象关联到音频对象audio
audio.setBuffer(AudioBuffer);
audio.setLoop(true); //是否循环
audio.setVolume(0.5); //音量
// 播放缓冲区中的音频数据
audio.play(); //play播放、stop停止、pause暂停
});
</script>
</body>
<button onclick="audio.play()">start</button>
<button onclick="audio.pause()">pause</button>
<button onclick="audio.stop()">stop</button>
</html>
function playBackground(){
// 创建一个虚拟的监听者
var listener = new THREE.AudioListener();
// 监听者绑定到相机对象
camera.add(listener);
// 创建一个位置音频对象,监听者作为参数,音频和监听者关联。
var PosAudio = new THREE.PositionalAudio(listener);
//音源绑定到一个网格模型上
mesh.add(PosAudio);
// 创建一个音频加载器
var audioLoader = new THREE.AudioLoader();
// 加载音频文件，返回一个音频缓冲区对象作为回调函数参数
audioLoader.load('./audio/幸福的早晨.mp3', function(AudioBuffer) {
// console.log(buffer);
// 音频缓冲区对象关联到音频对象audio
PosAudio.setBuffer(AudioBuffer);
PosAudio.setVolume(0.9); //音量
PosAudio.setRefDistance(200); //参数值越大,声音越大
PosAudio.play(); //播放
});
}
实现粒子系统的可视化方案：
1.点精灵实现—性能效率高，功能强大
2.points模型实现，但只能显示位置，功能弱，不能添加贴图纹理
3.circleGeometry实现
4.plantGeometry实现
**
sprite可以用于进行标注热点等操作,具体实现较为简单,同时因为也算是mesh,所以sprite可以设置texture,使用图片作为背景等,也可以把一个canvas,把需要的文字图片等都加入进来
添加VTK模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>eg:Three.js中加载3D VTK模型+OrbitControls(轨道控制器)示例</title>
<style type="text/css">
html,
body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body onload="draw();">
</body>
<script src="../js/three.js"></script>
<script src="../js/loaders/VTKLoader.js"></script>
<script src="../js/controls/OrbitControls.js"></script>
<script src="../js/libs/stats.min.js"></script>
<!--<script src="js/libs/dat.gui.min.js"></script>-->
<script>
// 渲染器
var renderer;
function initRender() {
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
//告诉渲染器需要阴影效果
renderer.setClearColor(0xffffff);
document.body.appendChild(renderer.domElement);
}
// 相机
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 40, 50);
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
// 场景
var scene;
function initScene() {
scene = new THREE.Scene();
}
// 灯光
var light;
function initLight() {
scene.add(new THREE.AmbientLight(0x444444));
light = new THREE.PointLight(0xffffff);
light.position.set(0, 50, 50);
//告诉平行光需要开启阴影投射
light.castShadow = true;
scene.add(light);
}
// 物体
function initModel() {
//辅助工具
var helper = new THREE.AxesHelper(50);
scene.add(helper);
var loader = new THREE.VTKLoader();
loader.load("models/moai_fixed.vtk", function (geometry) {
//模型的法向量有问题，更新一下法向量
//这个函数用来计算每一个面归一化后的法向量，法向量垂直于面。
// 计算之后的法向量被存放在了face.normal中。法向量与模型受光情况有关
geometry.computeFaceNormals();
//这个函数计算每一个顶点的法向量。
geometry.computeVertexNormals();
//创建纹理
var mat = new THREE.MeshLambertMaterial({ color: 0xaaaaaa });
//创建模型
var group = new THREE.Mesh(geometry, mat);
// group.position.set( 10, 10, 0 );
group.scale.set(10, 10, 10);
scene.add(group);
});
}
//初始化性能插件
var stats;
function initStats() {
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
//document.body.appendChild(stats.dom);
}
// 控制器，用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
var controls;
function initControls() {
controls = new THREE.OrbitControls(camera, renderer.domElement);
// 如果使用animate方法时，将此函数删除
//controls.addEventListener( 'change', render );
// 使动画循环使用时阻尼或自转 意思是否有惯性
controls.enableDamping = true;
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
//controls.dampingFactor = 0.25;
//是否可以缩放
controls.enableZoom = true;
//是否自动旋转
controls.autoRotate = true;
controls.autoRotateSpeed = 0.5;
//设置相机距离原点的最远距离
controls.minDistance = 1;
//设置相机距离原点的最远距离
controls.maxDistance = 200;
//是否开启右键拖拽
controls.enablePan = true;
}
// 开始渲染
function render() {
renderer.render(scene, camera);
}
//窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
//更新控制器
render();
//更新性能插件
stats.update();
controls.update();
requestAnimationFrame(animate);
}
function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
animate();
// window.onresize = onWindowResize;
}
</script>
</html>
创建单个点精灵模型
/*** 6.创建点精灵模型
*/
// 加载纹理贴图
var texture = new THREE.TextureLoader().load("sprite.png");
// 创建精灵材质对象SpriteMaterial
var spriteMaterial = new THREE.SpriteMaterial({
color: 0xff00ff,//设置精灵矩形区域颜色
rotation: Math.PI / 4,//旋转精灵对象45度，弧度值
map: texture,//设置精灵纹理贴图
});
// 创建精灵模型对象，不需要几何体geometry参数
var sprite = new THREE.Sprite(spriteMaterial);
scene.add(sprite);
// 控制精灵大小，比如可视化中精灵大小表征数据大小
sprite.scale.set(10, 10, 1); 只需要设置x、y两个分量就可以
// 创建渲染器*并设置背景颜色
/**
* 1.创建渲染器对象
*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
哔哩哔哩threejs知识体系融合
Three.js模型动画，旋转，炸开，声音，高亮效果
2386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
