threejs和3d各种效果的学习
写给即将开始threejs学习的自己,各种尝试,各种记忆。不要怕,灰色的年华终会过去。
一个技术学习的快慢,以及你的深刻程度,还有你的以后遇到这个东西的时候的反应速度,很大程度上,取决于你的博客的深刻。
有时间看看的一些threejs的博客:
http://www.5icool.org/a/201310/a2773.html
粒子库:http://www.ffpic.com/jiaoben/151005337599.html
这个3D库不是3dmax可以研究下有时间: https://s.h5tu.com/jinli/hs/theplumblossom/
博客0:一个webgl学习的中文网站 http://www.hewebgl.com/article/articledir/1
博客0:中文文档 http://techbrood.com/threejs/docs/
博客1:http://blog.sina.com.cn/s/blog_62eb178a0102vox9.html
博客2:http://www.cnblogs.com/pursues/p/5226807.html
博客3:http://blog.csdn.net/ruangong1203/article/details/52156327
博客4:http://blog.sina.com.cn/s/blog_ad1c3bdf0101f2wz.html
博客5: http://blog.csdn.net/birdflyto206/article/details/52414272
博客6:利用threejs实现3D效果图 https://segmentfault.com/a/1190000005792628?_ea=945442
博客7: WebGL框架比较之Three.js和Babylon.js的比较 http://www.xiwnn.com/article/UTVRJ.html 这篇博客的博主是大牛,所以博客都看看。
博客8:绕任意方向旋转 https://www.zhihu.com/question/38366807
绕着任意点旋转 http://blog.csdn.net/ruangong1203/article/details/60476782
空间旋转:http://www.cnblogs.com/silent-stranger/p/6027266.html
博客9:threejs全景图插件http://www.htmleaf.com/Demo/201508112395.html
博客10:http://blog.csdn.net/birdflyto206/article/details/52414346
博客11:一些学习的干货
大神的OpenGL教程 图形学理论视频课程-实现OpenGL精简内核 http://edu.csdn.net/course/detail/3814 http://edu.51cto.com/course/course_id-8339.html OpenGL实战编码设计视频课程 http://edu.csdn.net/course/detail/3512 http://edu.51cto.com/course/course_id-7893.html 游戏开发实战之OpenGL ES 2.0基础精讲视频课程 http://edu.csdn.net/course/detail/958 http://edu.51cto.com/course/course_id-4368.html 游戏开发实战之OpenGL ES2.0 中级篇视频课程 http://edu.csdn.net/course/detail/1167 http://edu.51cto.com/course/course_id-4369.html 三维游戏引擎开发-渲染实战视频课程 http://edu.csdn.net/course/detail/606 http://edu.51cto.com/course/course_id-4370.html 三维游戏引擎设计与实现-GUI设计与实现精讲视频课程 http://edu.csdn.net/course/detail/1037 http://edu.51cto.com/course/course_id-4371.html 太空大战3D游戏实战视频课程 http://edu.csdn.net/course/detail/763 http://edu.51cto.com/course/course_id-4374.html 血腥大地课程系列 http://edu.csdn.net/course/detail/4398 http://edu.51cto.com/course/course_id-8619.html 场景编辑器制作 http://edu.csdn.net/course/detail/4597 http://edu.51cto.com/course/course_id-8808.html OOpenGL-实现视频播放(FFMpeg)视频课程 http://edu.csdn.net/course/detail/3959 http://edu.51cto.com/course/course_id-8361.html OpenGL-Shader 实现RGB到YUV420加速转换输 http://edu.csdn.net/course/detail/4020 http://edu.51cto.com/course/course_id-8383.html OpenGL实现shapefile的绘制 http://edu.csdn.net/course/detail/3422 http://edu.51cto.com/course/course_id-7697.html OpenGL 实现Google地图瓦片的绘制,漫游 http://edu.csdn.net/course/detail/3420 http://edu.51cto.com/course/course_id-7795.html Google地图下载器制作视频课程 http://edu.csdn.net/course/detail/3958 http://edu.51cto.com/course/course_id-8357.html
1..out box li
perspective:500px这个属性必须在out上。
transform-style:preserve-3d;这个属性必须在box上边。
2./*x轴往后是正*//*y轴往左是负*/
3.
下面我们开始讲解three.js。
http://www.ituring.com.cn/article/49782
正式开始我们的threejs历程。
1.每次练习的代码查看简单的坐标系
红色的是x轴,青色的是Y轴,蓝色是z轴。
window.onload = function(){
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
var renderer = new THREE.WebGLRenderer();
renderer.setClearColorHex();
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(window.innerWidth, window.innerHeight);
// show axes in the screen
var axes = new THREE.AxisHelper(20);//这个20表示轴的长度
scene.add(axes);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
document.getElementById("WebGL-output").appendChild(renderer.domElement);
// render the scene
renderer.render(scene, camera);
}
2.threejs采取的是右手坐标系。
这里我们需要知道,右手坐标系z轴方向和左手的z轴方向相反。
3.最简单的坐标轴和立方体的动画。
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0,0,10);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor('#000');
document.getElementById("WebGL-output").appendChild(renderer.domElement); //立方体
var cube = new THREE.Mesh(new THREE.CubeGeometry(1,2,3), new THREE.MeshBasicMaterial({
color : 'green'
}));
scene.add(cube); //坐标轴辅助
var axes = new THREE.AxisHelper(10);
scene.add(axes); //动画
function updata(){
cube.rotation.y +=0.01;
axes.rotation.y +=0.01;
renderer.render(scene, camera);
requestAnimationFrame(updata);
}
updata();
4. cube.rotation.y注意这里的但是是弧度。
5.网上看到别人遇到的一个问题:
在three.js中导入了外部创建的几何体,我想使物体本身的坐标系围绕Y轴旋转45度:
object.rotation.y=Math.PI/4;
object.position.x=1;
但是旋转后物体的坐标并没有变化,即物体的世界坐标还是(1,0,0)。请问我改如何实现这种想法,以上程序错误在哪里?谢谢大家的解答。
解答:
我找到解决方案了,分享给大家,rotation改变的是子对象的坐标系,但是不改变本身的坐标系角度,所以想要改变其自身的坐标系方向,可以为其添加父对象,然后改变父对象的rotation。
temp=new THREE.Object3D();
temp.add(object);
temp.rotation.y=Math.PI/4;
此时object的XZ坐标系就旋转了45度。
6.
// position and point the camera to the center of the scene
camera.position.x = -;
camera.position.y = ;
camera.position.z = ;
camera.lookAt(scene.position); // add spotlight for the shadows
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-, , -);
spotLight.castShadow = true;
scene.add(spotLight);
7.
function renderScene() {
stats.update();
// rotate the cube around its axes
cube.rotation.x += 0.02;
cube.rotation.y += 0.02;
cube.rotation.z += 0.02;
// bounce the sphere up and down
step += 0.04;
sphere.position.x = 20 + ( 10 * (Math.cos(step)));
sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));
// render using requestAnimationFrame
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
8.网上的一篇博客:
9.threejs导入外部模型
http://www.w3cmark.com/2016/threejs-mark-02.html
10.关于光
// add subtle ambient lighting//细小的周围的灯
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
// add spotlight for the shadows //聚光灯的投影
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
11.
three.js 源码注释(四)Math/Vector3.js
http://blog.csdn.net/omni360/article/details/39341381
12.标准的记忆的代码:
各种three.js的版本提供。
我们用的69
<script src="http://cdn.bootcss.com/three.js/r69/three.js"></script>
免费cdn
//场景对象
var scene = new THREE.Scene();
//相机对象
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 渲染器对象
var renderer = new THREE.WebGLRenderer();
//渲染器对象常用的方法
renderer.setClearColorHex();
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(window.innerWidth, window.innerHeight);
// 创建一个立方体
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
// 设置立方体的位置
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
// 立方体添加到场景中
scene.add(cube);
//设置相机的位置
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
//追加到页面中
document.getElementById("box").appendChild(renderer.domElement);
function renderScene() {
// rotate the cube around its axes
cube.rotation.x += 0.02;
cube.rotation.y += 0.02;
cube.rotation.z += 0.02;
//最常用的重复调用的方法requestAnimationFrame
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
renderScene();
13.为了有阴影,添加光
// add spotlight for the shadows
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
14. 最简单的立方体自身旋转,球体绕一个中心旋转。(轨迹为一个半圆)
// rotate the cube around its axes
cube.rotation.x += 0.02;
cube.rotation.y += 0.02;
cube.rotation.z += 0.02; // bounce the sphere up and down
step += 0.04;
sphere.position.x = 20 + ( 10 * (Math.cos(step)));
sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));
15.当屏幕的大小改变的时候,我们的画布,也改变。
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// listen to the resize events
window.addEventListener('resize', onResize, false);
16.各种光。从官方文档上来看,光源的总类有Light、AmbientLight、AreaLight、DirectionalLight、HemisphereLight、PointLight、SpotLight这几种;
如果只添加ambientLight,则mesh颜色完全随ambientLight的颜色,不管原来物体本身的颜色如何。ambientLight很简单,只有一个参数,即环境光的颜色。
如果只添加pointLight,则mesh颜色会混合光源颜色和mesh本身颜色;
一般情况下用这两种光源,多的情况自己考虑。上面的博客2:可以查看更多内容。
// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight); // add spotlight for the shadows
var spotLight = new THREE.SpotLight(0x000080);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
17.带雾霾的场景
//scene.fog=new THREE.FogExp2( 0xffffff, 0.015 );
scene.fog = new THREE.Fog(0xffffff, 0.015, 100);
18. MeshBasicMaterial 与 MeshLambertMaterial 材质不同出来的效果还是有点不同的,后边的更有金属光泽。
还有一种材料是
var meshMaterial = new THREE.MeshNormalMaterial({color: 0x7777ff});
这个可是设置:
meshMaterial.opacity
meshMaterial.transparent
meshMaterial.visible
meshMaterial.wireframe
meshMaterial.wireframeLinewidth
19.这个暂时不说。
加入了
<script type="text/javascript" src="../libs/ParametricGeometries.js"></script>
<script type="text/javascript" src="../libs/ConvexGeometry.js"></script>
20.通过改变一个正方体的8个点,来调整一个正方体。
vertices 表示定义的点
faces 表示连接的定点数,如果是正方形的话,只有8个定点,范围是0-7,不能随意定义。
var vertices = [
new THREE.Vector3(1, 3, 1),
new THREE.Vector3(1, 3, -1),
new THREE.Vector3(1, -1, 1),
new THREE.Vector3(1, -1, -1),
new THREE.Vector3(-1, 3, -1),
new THREE.Vector3(-1, 3, 1),
new THREE.Vector3(-1, -1, -1),
new THREE.Vector3(-1, -1, 1)
]; var faces = [
new THREE.Face3(0, 2, 1),
new THREE.Face3(2, 3, 1),
new THREE.Face3(4, 6, 5),
new THREE.Face3(6, 7, 5),
new THREE.Face3(4, 5, 1),
new THREE.Face3(5, 0, 1),
new THREE.Face3(7, 6, 2),
new THREE.Face3(6, 3, 2),
new THREE.Face3(5, 7, 0),
new THREE.Face3(7, 2, 0),
new THREE.Face3(1, 3, 4),
new THREE.Face3(3, 6, 4),
]; var geom = new THREE.Geometry();
geom.vertices = vertices;
geom.faces = faces;
geom.computeFaceNormals(); var materials = [
new THREE.MeshLambertMaterial({opacity: 0.6, color: 0x44ff44, transparent: true}),
new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true}) ]; var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, materials);
mesh.children.forEach(function (e) {
e.castShadow = true
});
// mesh.children[0].translateX(0.5);
// mesh.children[0].translateZ(0.5); scene.add(mesh);
render函数中的修改的话:
var vertices = [];
for (var i = 0; i < 8; i++) {
vertices.push(new THREE.Vector3(controlPoints[i].x, controlPoints[i].y, controlPoints[i].z));
} mesh.children.forEach(function (e) {
e.geometry.vertices = vertices;
e.geometry.verticesNeedUpdate = true;
e.geometry.computeFaceNormals();
});
21. Math.random()*7 小于7的随机数。Math.random()*8 小于8的随机数。
22.感觉这是个神器,当你调整动画的时候,可以利用他进行大致的调整,太有用了哈。
23.两种视角
this.switchCamera = function () {
if (camera instanceof THREE.PerspectiveCamera) {
camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);
camera.position.x = 120;
camera.position.y = 60;
camera.position.z = 180;
camera.lookAt(scene.position);
this.perspective = "Orthographic";
} else {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 120;
camera.position.y = 60;
camera.position.z = 180; camera.lookAt(scene.position);
this.perspective = "Perspective";
}
};
24.修改lookAd视角
一般的时候我们的视角设定。
camera.lookAt(scene.position);
另外一种方式:
var lookAtGeom = new THREE.SphereGeometry(2);
var lookAtMesh = new THREE.Mesh(lookAtGeom, new THREE.MeshLambertMaterial({color: 0xff0000}));
scene.add(lookAtMesh);
在render中修改的方式:
step += 0.02;
if (camera instanceof THREE.Camera) {
var x = 10 + ( 100 * (Math.sin(step)));
camera.lookAt(new THREE.Vector3(x, 10, 0));
lookAtMesh.position.copy(new THREE.Vector3(x, 10, 0));
}
25.CanvasRenderer 与 WebGLRenderer 的区别和联系请看博客4的详解。可以看learning-threejs中的04中的01.
26.learnging-threejs中我们可以看出camera.near 和 camera.far可以改变摄像机的远近,但是我个人没有看出什么区别来。在,learning-threejs中04-02我们可以仔细去看。
27.混合材料
var cubeMaterial = new THREE.MeshDepthMaterial();
var colorMaterial = new THREE.MeshBasicMaterial({
color: controls.color,
transparent: true,
blending: THREE.MultiplyBlending
});
var cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [colorMaterial, cubeMaterial]);
28. THREE.MeshFaceMaterial
// add all the rubik cube elements
var mats = [];
mats.push(new THREE.MeshBasicMaterial({color: 0x009e60}));
mats.push(new THREE.MeshBasicMaterial({color: 0x009e60}));
mats.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));
mats.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));
mats.push(new THREE.MeshBasicMaterial({color: 0xffd500}));
mats.push(new THREE.MeshBasicMaterial({color: 0xffd500}));
mats.push(new THREE.MeshBasicMaterial({color: 0xff5800}));
mats.push(new THREE.MeshBasicMaterial({color: 0xff5800}));
mats.push(new THREE.MeshBasicMaterial({color: 0xC41E3A}));
mats.push(new THREE.MeshBasicMaterial({color: 0xC41E3A}));
mats.push(new THREE.MeshBasicMaterial({color: 0xffffff}));
mats.push(new THREE.MeshBasicMaterial({color: 0xffffff})); var faceMaterial = new THREE.MeshFaceMaterial(mats); for (var x = 0; x < 3; x++) {
for (var y = 0; y < 3; y++) {
for (var z = 0; z < 3; z++) {
var cubeGeom = new THREE.BoxGeometry(2.9, 2.9, 2.9);
var cube = new THREE.Mesh(cubeGeom, faceMaterial);
cube.position.set(x * 3 - 3, y * 3, z * 3 - 3); group.add(cube);
}
}
}
29. 关于各种材料 THREE.MeshPhongMateria
30.THREE.SphereGeometry(0.2) 这个如果传0.2的话就是一个点,如果传4, 20, 20就是一个球。
31.我们在20中已经通过
var geom = new THREE.Geometry();
geom.vertices = vertices;
geom.faces = faces;
geom.computeFaceNormals();
这样的方式,通过点去构建3D图形。这里我们在介绍另外一种方式。
把多个图形作为一个整体,类似分组的概念。
spGroup = new THREE.Object3D();
spGroup.add(spMesh)//spMesh是一个个小的3D模型。
scene.add(spGroup); 利用多个点去构建一个图形
// use the same points to create a convexgeometry
var hullGeometry = new THREE.ConvexGeometry(points);
hullMesh = createMesh(hullGeometry);
scene.add(hullMesh);
function generatePoints() {
// add 10 random spheres
var points = [];
for (var i = 0; i < 20; i++) {
var randomX = -15 + Math.round(Math.random() * 30);
var randomY = -15 + Math.round(Math.random() * 30);
var randomZ = -15 + Math.round(Math.random() * 30); points.push(new THREE.Vector3(randomX, randomY, randomZ));
} spGroup = new THREE.Object3D();
var material = new THREE.MeshBasicMaterial({color: 0xff0000, transparent: false});
points.forEach(function (point) { var spGeom = new THREE.SphereGeometry(0.2);
var spMesh = new THREE.Mesh(spGeom, material);
spMesh.position.copy(point);
spGroup.add(spMesh);
});
// add the points as a group to the scene
scene.add(spGroup); // use the same points to create a convexgeometry
var hullGeometry = new THREE.ConvexGeometry(points);
hullMesh = createMesh(hullGeometry);
scene.add(hullMesh);
}
function createMesh(geom) {
// assign two materials
var meshMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00, transparent: true, opacity: 0.2});
meshMaterial.side = THREE.DoubleSide;
var wireFrameMat = new THREE.MeshBasicMaterial();
wireFrameMat.wireframe = true;
// create a multimaterial
var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
return mesh;
}
32.开始学习画图。画几何体,可以参考博客5.
var shape = createMesh(new THREE.ShapeGeometry(drawShape()));
scene.add(shape);
接下来我们开始观察drawShape()
var shape = new THREE.Shape();
//将绘图点移动到指定的位置
shape.moveTo(10, 10);
//从当前位置画一条线到指定的位置
shape.lineTo(10, 40);
//贝塞尔曲线,当前点作为起始点,(15,25) 和 (25,25) 两点决定曲线的曲率,(30,40)作为结束点。
shape.bezierCurveTo(15, 25, 25, 25, 30, 40);
//沿着提供的点集绘制一条光滑的曲线。起始点是当前点。
shape.splineThru(
[new THREE.Vector2(32, 30),
new THREE.Vector2(28, 20),
new THREE.Vector2(30, 10),
]);
//二次曲线 (20,15) 决定当前曲线的曲率,(10,10) 曲线的结束点。当前点作为起始点。
shape.quadraticCurveTo(20, 15, 10, 10);
//挖三个洞
var hole1 = new THREE.Path();
hole1.absellipse(16,24,2,3,0,Math*PI*2,true);
shape.holes.push(hole1); var hole2 = new THREE.Path();
hole2.absellipse(23,24,2,3,0,Math.PI*2,true);
shape.holes.push(hole2); var hole3 = new THREE.Path();
hole3.absarc(20,16,2,0,Math.PI,true);
shape.holes.push(hole3);
scene.remove(shape);
var controls = new function(){
this.amount = 2;
this.bevelThickness = 2;
this.bevelSize = 0.5;
this.bevelEnabled = true;
this.bevelSegments = 3;
this.bevelEnabled = true;
this.curveSegments = 12;
this.steps = 1;
}
var options = {
amount: controls.amount,
bevelThickness: controls.bevelThickness,
bevelSize: controls.bevelSize,
bevelSegments: controls.bevelSegments,
bevelEnabled: controls.bevelEnabled,
curveSegments: controls.curveSegments,
steps: controls.steps
};
shape = createMesh(new THREE.ExtrudeGeometry(drawShape(),options ));
// add it to the scene.
scene.add(shape);
33. 建立管道的代码。tube管道的形成公式。
function generatePoints(points, segments, radius, radiusSegments, closed) {
// add n random spheres spGroup = new THREE.Object3D();
var material = new THREE.MeshBasicMaterial({color: 0xff0000, transparent: false});
points.forEach(function (point) { var spGeom = new THREE.SphereGeometry(0.2);
var spMesh = new THREE.Mesh(spGeom, material);
spMesh.position.copy(point);
spGroup.add(spMesh);
});
// add the points as a group to the scene
scene.add(spGroup); // use the same points to create a convexgeometry
var tubeGeometry = new THREE.TubeGeometry(new THREE.SplineCurve3(points), segments, radius, radiusSegments, closed);
tubeMesh = createMesh(tubeGeometry);
scene.add(tubeMesh);
}
34.
text1 = createMesh(new THREE.TextGeometry("Learning", options));
text1.position.z = -100;
text1.position.y = 100;
scene.add(text1); text2 = createMesh(new THREE.TextGeometry("Three.js", options));
scene.add(text2);
35.给组添加辅助线的方式。
var arrow = new THREE.ArrowHelper(new THREE.Vector3(0, 1, 0), group.position, 10, 0x0000ff);
scene.add(arrow);
36. 组绑定盒子的方式。
this.positionBoundingBox = function () {
scene.remove(bboxMesh);
var box = setFromObject(group);
var width = box.max.x - box.min.x;
var height = box.max.y - box.min.y;
var depth = box.max.z - box.min.z; var bbox = new THREE.BoxGeometry(width, height, depth);
bboxMesh = new THREE.Mesh(bbox, new THREE.MeshBasicMaterial({
color: 0x000000,
vertexColors: THREE.VertexColors,
wireframeLinewidth: 2,
wireframe: true
}));
// scene.add(bboxMesh); bboxMesh.position.x = ((box.min.x + box.max.x) / 2);
bboxMesh.position.y = ((box.min.y + box.max.y) / 2);
bboxMesh.position.z = ((box.min.z + box.max.z) / 2);
}
37.做一个卫星环绕地球的模型。
(1)背景图。
(2)卫星模型的导入,并围绕中心旋转。
(3) 地球模型的导入。
(4)视角随滚轮的控制远近。移动端这个可以忽略。或者其他的方法代替。
(5)切换视角。
38.object.rotation 这个是绕着自身的坐标系旋转,如果我们想卫星绕着地球旋转的话。
这个2d的图形的旋转设置,自身的rotate.y就是旋转坐标轴。
这个是camera的旋转。
这个是利用组的旋转。
38.每次开发前,一个比较简单的版本,复制就行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/three.js/r69/three.js"></script>
<script type="text/javascript" src="./OBJLoader.js"></script>
<script type="text/javascript" src="./MTLLoader.js"></script>
<script type="text/javascript" src="./OBJMTLLoader.js"></script>
<script type="text/javascript" src="./stats.js"></script>
<script type="text/javascript" src="./dat.gui.js"></script>
</head>
<body>
<div id="Stats-output">
</div>
<div id="WebGL-output">
</div>
<script type="text/javascript">
function init(){
var stats = initStats();
// 创建一个场景对象
var scene = new THREE.Scene();
// 相机对象
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 相机的位置
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 50;
camera.lookAt(new THREE.Vector3(0, 10, 0));
//渲染对象
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColor(new THREE.Color(0xaaaaff, 1.0));
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true;
//辅助坐标系 红色是x轴,蓝色是z轴
var axes = new THREE.AxisHelper(20);//这个20表示轴的长度
scene.add(axes);
//聚光灯的位置
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(0, 40, 30);
spotLight.intensity = 2;
scene.add(spotLight);
//周围弱小的光
var ambient = new THREE.AmbientLight( 0xffffff );
scene.add( ambient );
//添加到位置
document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
//辅助但是又可以提高开发效率的工具
var controls = new function () {
// we need the first child, since it's a multimaterial
};
var gui = new dat.GUI();
var loader = new THREE.OBJMTLLoader();
//导入模型,这个方法是老版本的
/* loader.load('./beidou/beidou.obj', './beidou/beidou.mtl',function (object) {
object.scale.set(1, 1, 1);
mesh = object;
scene.add(mesh);
object.rotation.x = 0.2;
object.rotation.y = -1.3;
});*/
//导入一个普通的立方体和球
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
// position the cube
cube.position.x = 0;
cube.position.y = 0;
cube.position.z = 0;
// add the cube to the scene
scene.add(cube);
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// position the sphere
sphere.position.x = 20;
sphere.position.y = 0;
sphere.position.z = 2;
sphere.castShadow = true;
// add the sphere to the scene
scene.add(sphere); function render() {
stats.update();
// render using requestAnimationFrame
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
}
render();
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
initStats();
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onResize, false);
}
window.onload = init; </script>
</body>
</html>
39.blender软件导出json的时候的配置参数。
blender中操作
新建一个我们会发现一个默认的cube,
然后我们导入模型,
编辑模式中,把默认的cube弄出来。
退出编辑模式,选中cube,然后x,删除,
然后a
ctrl j
然后导出来。
第一次导出来的估计不行,
然后你按a然后在按ctrl j就行了,然后导出,带图片的证明成功了。
http://jingyan.baidu.com/article/3052f5a1e6f95597f21f8670.html
40.
41.
threejs http://www.w3cmark.com/2016/threejs-mark-02.html
http://blog.csdn.net/grief_of_the_nazgul/article/details/42743005 http://m.blog.csdn.net/article/details?id=42776605
我的手机 20:57:21
这个必看看
我的手机 20:57:21
http://m.blog.csdn.net/article/details?id=51451462
我的手机 20:57:21
版本已经不支持原来那个loader http://www.ctolib.com/topics-111157.html 下边的额这篇博客解决了滚轮的问题。
http://www.bubuko.com/infodetail-1864794.html 问题:鼠标旋转控制左边周的旋转。 鼠标旋转的时候,图像向相反的方向旋转。
https://www.oschina.net/question/2486379_2197851 threejs TransformControls.js API three js 封装的对物体进行移动、缩放、旋转的库 我找的3D音乐播放器
http://www.jq22.com/jquery-info2856 没事干的时候,可以参考的好的作品或者博客:
http://www.ithome.com/html/it/195970.htm
http://www.mizuiren.com/327.html http://wayou.github.io/3D_Audio_Spectrum_VIsualizer/ http://www.html5tricks.com/html5-circle-audio-player.html
\ blender软件的学习 http://www.bilibili.com/video/av909518/
threejs和3d各种效果的学习的更多相关文章
- 转 threejs中3D视野的缩放实现
Threejs基础部分学习知道透视相机new THREE.PerspectiveCamera(fov, aspect , near,far)中. fov视野角(拍摄距离)越大,场景中的物体越小.fov ...
- CSS3 3D立方体效果-transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- 纯css3 transforms 3D文字翻开翻转3D开放式效果
详细内容请点击 在线预览立即下载 在本教程中,将基于CSS3创建的一个实现一个有趣的3D开放式效果.教程的目的是展示我们如何能带来一些生活上使用CSS3 . html: <ul class=&q ...
- css3之3D翻牌效果
最近一直在学css3,发现他真的是越来越牛逼.现在的css3已经不在是以前的css了,它能做出的功能效果是我们没法想象的了.它可以实现flash,可以制作一些js能做出来的效果,还可以写出ps做出 ...
- Threejs 开发3D地图实践总结【转】
Threejs 开发3D地图实践总结 前段时间连续上了一个月班,加班加点完成了一个3D攻坚项目.也算是由传统web转型到webgl图形学开发中,坑不少,做了一下总结分享. 1.法向量问题 法线是垂 ...
- 教你如何利用threejs对3D模型皮肤进行DIY
一步一步教你如何利用threejs加载gltf模型来实现DIY换肤功能. 模型准备 模型制作 模型可以通过网上下载,也可以自己通过c4d.maya.blender等模型制作软件得到.这里就不叙述有关模 ...
- 2020厦门大学综述翻译:3D点云深度学习(Remote Sensiong期刊)
目录 摘要 1.引言: 2.点云深度学习的挑战 3.基于结构化网格的学习 3.1 基于体素 3.2 基于多视图 3.3 高维晶格 4.直接在点云上进行的深度学习 4.1 PointNet 4.2 局部 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 用FireFox火狐浏览器的3D Tilt 插件查看网页3D视图效果
逛博客发现了网页的3D视图效果,一搜原来是Firefox特有的一个功能,先看效果: 相当炫酷,接下来介绍如何实现. 1.首先安装3d tilt 插件: 从火狐浏览器的添加插件页面,搜索:3D Tilt ...
随机推荐
- Django初级手册5-自动化测试
什么是自动化测试 每次更新完系统后,可自动进行测试,而不是手工从头测试一遍: 从长远和全局的角度看,测试能节约我们的时间: 测试是一种积极的行为,它能预防问题,而不仅仅是识别问题: 测试有助于代码美观 ...
- C# 如何把dataTable以参数的形式传入 sql 存储过程
==================================================-- sql代码 示例:CREATE TYPE dbo.Content AS TABLE( ID i ...
- 55. Jump Game(贪心)
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- 25最短路径之Dijkstra算法
图的最优化问题:最小生成树.最短路径 典型的图应用问题 无向连通加权图的最小生成树 有向/无向加权图的最短路径 四个经典算法 Kruskal算法.Prim算法---------------最小生成树 ...
- lnmp之阿里云源码安装mysql5.7.17
mysql5.7.17一直号称世界上最好的mysql 那么就在阿里云主机linux安装它(采用的源码安装mysql5.7.17) 我在阿里云主机上安装它 连接阿里云主机 进入,跟我们自己装的虚拟机一毛 ...
- 【R】书籍推荐
From: http://xccds1977.blogspot.com/2013/02/r.html http://www.1point3acres.com/bbs/thread-51301-1-1. ...
- Linux下配置多个tomcat多个域名
Linux下配置多个tomcat多个域名复制tomcat:mkdir /home/server/testcp -rf /home/server/shichuan/* /home/server/test ...
- org.apache.catalina.core.StandardWrapperValve invoke的解决办法
org.apache.catalina.core.StandardWrapperValve invoke的解决办法 比较容易错的地方是页面带参数进行跳转,由于跳转之后的页面本身也要执行一部分sql语句 ...
- jQuery 是javascript的一个库(常用插件、处理器)
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery就是javascript的一个库,把我 ...
- 深入hibernate的三种状态(转)
hibernate的三种状态: 瞬时对象,持久化对象,托管对象. hibernate的两级缓存:1>一级缓存:session 2>二级缓存:sessionfactory. 瞬时对象: ...