<script src="/lib/three-v60.js"></script>
<script src="/lib/js/controls/OrbitControls.js"></script>
<script src="/lib/js/libs/stats.min.js"></script>
<script src="/lib/js/libs/dat.gui.min.js"></script>
<script>
var renderer;
function initRender() {
renderer = new THREE.WebGLRenderer({antialias: true,alpha:true});
renderer.setSize(window.innerWidth, window.innerHeight);
//告诉渲染器需要阴影效果
//renderer.shadowMap.enabled = true;
//renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是,没有设置的这个清晰 THREE.PCFShadowMap
renderer.setClearColor(0x000000);
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, 100);
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var ambientLight, directionalLight;
function initLight() {
}
var cube, plane, meshMaterial;
function initModel() {
//辅助工具
var helper = new THREE.AxisHelper(10);
scene.add(helper);
var s = 25;
var cube = new THREE.CubeGeometry(s, s, s);
var material = new THREE.MeshDepthMaterial();
for (var i = 0; i < 3000; i++) {
var mesh = new THREE.Mesh(cube, material);
mesh.position.x = 800 * ( 2.0 * Math.random() - 1.0 );
mesh.position.y = 800 * ( 2.0 * Math.random() - 1.0 );
mesh.position.z = 800 * ( 2.0 * Math.random() - 1.0 );
mesh.rotation.x = Math.random() * Math.PI;
mesh.rotation.y = Math.random() * Math.PI;
mesh.rotation.z = Math.random() * Math.PI;
mesh.updateMatrix();
scene.add(mesh);
}
}
//初始化dat.GUI简化试验流程
var gui;
function initGui() {
//声明一个保存需求修改的相关数据的对象
controls = {
};
var gui = new dat.GUI();
}
//初始化性能插件
var stats;
function initStats() {
stats = new Stats();
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 = false;
//设置相机距离原点的最远距离
controls.minDistance = 50;
//设置相机距离原点的最远距离
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();
initGui();
//initControls();
initStats();
animate();
window.onresize = onWindowResize;
}
</script>
THREE.JS的材质THREE.MESHDEPTHMATERIAL
原创-
THREE.JS的融合材质
three.js
three.js -
33 Three.js的材质THREE.MeshBasicMaterial
reframe(线框) 设置这个属性的可以将材质渲染...
three-js WebGL 材质 meshBasic material -
38 Three.js高级材质THREE.ShaderMaterial
注意看这一篇文章最好有webgl基础的同学看,如果没有webgl原生基础,你会看得很懵逼。简介THREE.ShaderMaterial是Three. 或...
webgl javascript 对象 网格 three-js -
36 Three.js高级材质THREE.MeshLambertMaterial
简介这、shading、blending、depthTest、depthWrite、wireframe、wirefram...
webgl three-js material lambert html -
37 Three.js高级材质THREE.MeshPhongMaterial
n模型不同, 它可以模拟具有镜面高光的光泽表面(如上漆木材)。相...
webgl three-js 高级材质 MeshPhong html -
35 Three.js的融合材质
简介在上一节,使用three.js的60版本,我们成功的实现了THREE.MeshDepthMaterial的案例。但是,我们没有办法修改
three-js WebGL 融合材质 Math html -
Three.js的材质Material信息
Material材质信息,是独立于物体顶点之外,与渲染效果相关的属性。比如通过设置材质可以改变物体的颜色、纹理贴图、光照模式等等。
javascript 材质 开发语言 纹理贴图 ide -
40 Three.js线性几何体材质THREE.LineDashedMaterial
简介这种材质和THREE.LineBasicMaterial略有些不同,它不但可以给线段上色,还可以添加一种虚线的效果。额外属性 名称 描述 scale 线条
虚线材质 three-js webgl javascript lineDashed -
39 Three.js线性几何体材质THREE.LineBasicMaterial
简介THREE.LineBasicMaterial用于绘制线段的基础材质。相关属性 名称 描述 color 该属性设置材质的颜色,如果设置了v
webgl three-js 线性材质 Math html -
Three.JS教程5 threejs中的材质
在Three.js中,材质是应用于几何体(Geometry)的外观和纹理的规则。它们决定了对象在场景中如何反
javascript 材质 开发语言 Boo 默认值 -
【Three.js技术简介】什么是Three.js
部分内容参考自:(1)Three.js百度百科:https://baike.baidu.com/it
javascript 3d 百度 图例