function init() {
function test1 () {
// 第一种生成渲染器的方式
// var renderer = new THREE.WebGLRenderer({
// canvas: document.getElementById('mainCanvas')
// });
// 第二种生成渲染器的方式
// 1.定义渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 300);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);
renderer.setClearColor(0x000000);
// 2.定义场景
var scene = new THREE.Scene();
// 3.定义摄像机，并添加到场景
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);
// 4.定义物体，并添加到场景
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),new THREE.MeshBasicMaterial({color: 0xff0000}));
scene.add(cube);
// 5.渲染场景和摄像机
renderer.render(scene, camera);
}
function test2 () {
// 1.定义渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 300);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);
// 2.定义场景
var scene = new THREE.Scene();
// 3.正交摄影机，主要左右上下对称，以及和渲染器的比例一致
// var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
// camera.position.set(4, -3, 5);
// camera.lookAt(new THREE.Vector3(0, 0, 0));
// 3.透视摄影机，角度，width/height比例，近远距离
var camera = new THREE.PerspectiveCamera(45, 400 / 300, 1, 10);
camera.position.set(0, 0, 5);
scene.add(camera);
// 4.正方体
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
}));
scene.add(cube);
// 5.渲染场景和摄像机
renderer.render(scene, camera);
}
function test3() {
// 1.定义渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 300);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);
// 2.定义场景
var scene = new THREE.Scene();
// 3.正交摄影机，主要左右上下对称，以及和渲染器的比例一致
var camera = new THREE.OrthographicCamera(-10, 10, 7.5, -7.5, 1, 10);
camera.position.set(4, 3, 5);
camera.lookAt(new THREE.Vector3(0, 0, 0));
// 3.透视摄影机，角度，width/height比例，近远距离
// var camera = new THREE.PerspectiveCamera(45, 400 / 300, 1, 10);
// camera.position.set(0, 0, 5);
scene.add(camera);
// 4.网格包含顶点信息和材质
// 立方体,xyz,分段数
var myGeometry = new THREE.CubeGeometry(1, 2, 3, 2 ,2 ,3);
// 平面，xy,分段数
myGeometry = new THREE.PlaneGeometry(1, 1);
// 球体，半径，经度瓣数纬度层数，经度起点范围，纬度起点范围
myGeometry = new THREE.SphereGeometry(1, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2);
// 圆形，半径，分段数，起点范围
myGeometry = new THREE.CircleGeometry(1, 18, Math.PI / 3, Math.PI / 3 * 4);
// 圆柱体，顶底半径，高度，分段数，是否有顶底
myGeometry = new THREE.CylinderGeometry(2, 3, 4, 18, 3, true);
function test (){
// 四面体，八面体，十二面体,有问题
myGeometry = THREE.TetrahedronGeometry(3);
myGeometry = THREE.OctahedronGeometry(3);
myGeometry = THREE.IcosahedronGeometry(3);
// 圆环体，圆环半径，管道半径，分段数，起点
myGeometry = new THREE.TorusGeometry(3, 1, 4, 8, Math.PI / 3 * 2);
// 圆环结
myGeometry = new THREE.TorusKnotGeometry(2, 0.5, 32, 8);
// 字体
myGeometry = new THREE.TextGeometry('Hello', {size: 1, height: 1});
// 自定义形状
// 初始化几何形状
var geometry = new THREE.Geometry();
// 设置顶点位置
// 顶部4顶点
geometry.vertices.push(new THREE.Vector3(-1, 2, -1));
geometry.vertices.push(new THREE.Vector3(1, 2, -1));
geometry.vertices.push(new THREE.Vector3(1, 2, 1));
geometry.vertices.push(new THREE.Vector3(-1, 2, 1));
// 底部4顶点
geometry.vertices.push(new THREE.Vector3(-2, 0, -2));
geometry.vertices.push(new THREE.Vector3(2, 0, -2));
geometry.vertices.push(new THREE.Vector3(2, 0, 2));
geometry.vertices.push(new THREE.Vector3(-2, 0, 2));
// 设置顶点连接情况
// 顶面
geometry.faces.push(new THREE.Face4(0, 1, 2, 3));
// 底面
geometry.faces.push(new THREE.Face4(4, 5, 6, 7));
// 四个侧面
geometry.faces.push(new THREE.Face4(0, 1, 5, 4));
geometry.faces.push(new THREE.Face4(1, 2, 6, 5));
geometry.faces.push(new THREE.Face4(2, 3, 7, 6));
geometry.faces.push(new THREE.Face4(3, 0, 4, 7));
}
// 材质部分
// 基本材质，渲染后物体的颜色始终为该材质的颜色，而不会由于光照产生明暗、阴影效果
var myMaterial = new THREE.MeshBasicMaterial({
color: 0xffff00,
opacity: 0.75
});
// Lambert材质，只考虑漫反射而不考虑镜面反射，color是用来表现材质对散射光的反射能力，ambient表示对环境光的反射能力，emissive是材质的自发光颜
myMaterial = new THREE.MeshLambertMaterial({
color: 0xffff00
});
// Phong材质，考虑了漫反射和镜面反射的效果
myMaterial =
var cube = new THREE.Mesh(myGeometry,
myMaterial);
scene.add(cube);
// 光照
// 环境光是指场景整体的光照效果，是由于场景内若干光源的多次反射形成的亮度一致的效果，通常用来为整个场景指定一个基础亮度。
var light = new THREE.AmbientLight(0xffffff);
// 点光源是不计光源大小，可以看作一个点发出的光源。点光源照到不同物体表面的亮度是线性递减的
light = new THREE.PointLight(0xffffff, 2, 100);
light.position.set(0, 1.5, 2);
// 平行光，平面亮度与平面的位置无关，而只与平面的法向量相关
light = new THREE.DirectionalLight();
light.position.set(2, 5, 3);
// 聚光灯是一种特殊的点光源，它能够朝着一个方向投射光线
light = new THREE.SpotLight(0xffff00, 1, 100, Math.PI / 6, 25);
light.target = cube;
// 首先，我们需要在初始化时，告诉渲染器渲染阴影：renderer.shadowMapEnabled = true;
// 然后，对于光源以及所有要产生阴影的物体调用：xxx.castShadow = true;
// 对于接收阴影的物体调用：xxx.receiveShadow = true;
// 看到阴影照相机的位置
light.shadowCameraVisible = true;
// 阴影的精准度
light.shadowMapWidth = 1024;
light.shadowMapHeight = 1024;
// 阴影的深浅
light.shadowDarkness = 0.3;
// 软阴影
renderer.shadowMapSoft = true;
scene.add(light);
// 5.渲染场景和摄像机
renderer.render(scene, camera);
}
var test4 = function () {
// 无材质模型，有材质模型在js中设置材质
var loader = new THREE.OBJLoader();
// 模型路径，回调函数
loader.load('../lib/port.obj', function(obj) {
obj.traverse(function(child) {
if (child instanceof THREE.Mesh) {
// 设置材质
child.material = new THREE.MeshLambertMaterial({
color: 0xffff00,
side: THREE.DoubleSide // 绘制双面，后面的也可以绘制
});
}
});
mesh = obj; //储存到全局变量中
scene.add(obj);
});
// 模型+材质
var loader = new THREE.OBJMTLLoader();
loader.addEventListener('load', function(event) {
var obj = event.content;
mesh = obj;
scene.add(obj);
});
loader.load('../lib/port.obj', '../lib/port.mtl');
};
test3();
}
网友评论