33 Three.js的材质THREE.MeshBasicMaterial
2017-09-03 20:53
435 查看
简介
MeshBasicMaterial是一种非常简单的材质,这种材质不考虑场景中光照的影响。使用这种材质的网格会被渲染成简单的平面多边形,而且也可以显示几何体的线框。设置属性
Three.js除了可以设置共有的属性外,还可以设置以下属性:名称 | 描述 |
---|---|
color(颜色) | 设置材质的颜色 |
wireframe(线框) | 设置这个属性的可以将材质渲染成线框,非常适合调试 |
wireframeLinewidth(线框宽度) | 如果已经打开了wirefreme,这个属性定义线框中线的宽度 |
wireframeLinecap(线框线段端点) | 这个属性定义了线框模式下顶点键线段的端点如何显示。可选的值包括butt(平)、round(圆)和square(方)。默认值为round。在实际使用中,这个属性的修改结果很难看出来。WebGLRenderer对象不支持该属性。 |
wireframeLinejoin(线框线段连接点) | 这个属性定义了线段的连接点如何显示。可选的值有round(圆)、bevel(斜角)和miter(尖角)。默认值为round。如果你在一个使用低透明度和wireframeLinewidth值很大的例子里靠近观察,就可以看到这个属性的效果。WebGLRenderer对象不支持该属性 |
shading(着色) | 该属性定义如何着色。可选的值有THREE.SmoothShading、THREE.NoShading和THREE.FlatShading。默认值为THREE.SmoothShading,这将产生一个平滑的对象,看不到单个面 |
vertexColors(顶点颜色) | 可以通过这个属性给每个顶点定义不同的颜色。默认值为THREE.NoColors。如果将这个值设置为THREE.VertexColors,渲染器会采用THREE.Geometry对象的colors属性的值。该属性对象CanvasRenderer不起作用,但对WebGLRenderer起作用 |
fog(雾化) | 该属性指定当前材质是否受全局雾化效果设置的影响。默认true,如果设置为false,将不会受雾化的影响 |
使用案例
直接按照上一节的的两种方法中的一种方法创建实例化对象,设置相关属性即可。var meshMaterial = new THREE.MeshBasicMaterial({color:0xeeefff});
然后创建好图形形状,生成网格添加到scene当中即可
//球体 var sphereGeometry = new THREE.SphereGeometry(10, 30, 30); var sphere = new THREE.Mesh(sphereGeometry, meshMaterial); scene.add(sphere);
案例代码
案例查看地址:http://www.wjceo.com/blog/threejs/2018-02-12/35.html
代码可以直接运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> html, body { margin: 0; height: 100%; } canvas { display: block; } </style> </head> <body onload="draw();"> </body> <script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script> <script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script> <script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script> <script src="https://johnson2heng.github.io/three.js-demo/lib/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.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是,没有设置的这个清晰 THREE.PCFShadowMap 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() { ambientLight = new THREE.AmbientLight("#111111"); scene.add(ambientLight); directionalLight = new THREE.DirectionalLight("#ffffff"); directionalLight.position.set(-40, 60, -10); directionalLight.shadow.camera.near = 20; //产生阴影的最近距离 directionalLight.shadow.camera.far = 200; //产生阴影的最远距离 directionalLight.shadow.camera.left = -50; //产生阴影距离位置的最左边位置 directionalLight.shadow.camera.right = 50; //最右边 directionalLight.shadow.camera.top = 50; //最上边 directionalLight.shadow.camera.bottom = -50; //最下面 //这两个值决定使用多少像素生成阴影 默认512 directionalLight.shadow.mapSize.height = 1024; directionalLight.shadow.mapSize.width = 1024; //告诉平行光需要开启阴影投射 directionalLight.castShadow = true; scene.add(directionalLight); } var cube, plane, meshMaterial; function initModel() { //辅助工具 var helper = new THREE.AxisHelper(10); scene.add(helper); //球体 var sphereGeometry = new THREE.SphereGeometry(10, 30, 30); meshMaterial = new THREE.MeshBasicMaterial({color: 0xaaafff}); var sphere = new THREE.Mesh(sphereGeometry, meshMaterial); sphere.position.set(-20, 20, 0); sphere.castShadow = true; scene.add(sphere); //立方体 var cubeGeometry = new THREE.CubeGeometry(10, 10, 10); var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff}); cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.position.x = 30; cube.position.y = 5; cube.position.z = -5; //告诉立方体需要投射阴影 cube.castShadow = true; scene.add(cube); //底部平面 var planeGeometry = new THREE.PlaneGeometry(5000, 5000, 20, 20); var planeMaterial = new THREE.MeshLambertMaterial({color: 0xaaaaaa}); plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.rotation.x = -0.5 * Math.PI; plane.position.y = -0; //告诉底部平面需要接收阴影 plane.receiveShadow = true; scene.add(plane); } //初始化dat.GUI简化试验流程 var controls; function initGui() { //声明一个保存需求修改的相关数据的对象 controls = { rotationSpeed: 0.02, bouncingSpeed: 0.03, opacity: meshMaterial.opacity, transparent: meshMaterial.transparent, overdraw: meshMaterial.overdraw, visible: meshMaterial.visible, side: "front", color: meshMaterial.color.getStyle(), wireframe: meshMaterial.wireframe, wireframeLinewidth: meshMaterial.wireframeLinewidth, wireFrameLineJoin: meshMaterial.wireframeLinejoin, }; var gui = new dat.GUI(); var spGui = gui.addFolder("Mesh"); spGui.add(controls, 'opacity', 0, 1).onChange(function (e) { meshMaterial.opacity = e }); spGui.add(controls, 'transparent').onChange(function (e) { meshMaterial.transparent = e }); spGui.add(controls, 'wireframe').onChange(function (e) { meshMaterial.wireframe = e }); spGui.add(controls, 'wireframeLinewidth', 0, 20).onChange(function (e) { meshMaterial.wireframeLinewidth = e }); spGui.add(controls, 'visible').onChange(function (e) { meshMaterial.visible = e }); spGui.add(controls, 'side', ["front", "back", "double"]).onChange(function (e) { console.log(e); switch (e) { case "front": meshMaterial.side = THREE.FrontSide; break; case "back": meshMaterial.side = THREE.BackSide; break; case "double": meshMaterial.side = THREE.DoubleSide break; } meshMaterial.needsUpdate = true; console.log(meshMaterial); }); spGui.addColor(controls, 'color').onChange(function (e) { meshMaterial.color.setStyle(e) }); spGui.open(); } //初始化性能插件 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> </html>
相关文章推荐
- three.js 04-01 之 MeshBasicMaterial 材质
- 37 Three.js高级材质THREE.MeshPhongMaterial
- three.js 04-09 之 LineBasicMaterial 材质
- three.js 04-07 之 MeshPhongMaterial 材质
- 36 Three.js高级材质THREE.MeshLambertMaterial
- 34 Three.js的材质THREE.MeshDepthMaterial
- three.js 源码注释(四十八)Material /MeshBasicMaterial.js
- three.js 04-02 之 MeshDepthMaterial 材质
- three.js 04-06 之 MeshLambertMaterial 材质
- three.js 源码注释(五十一)Material /MeshDepthMaterial.js
- three.js 源码注释(五十二)Material /MeshFaceMaterial.js
- THREE.JS的材质material一些注意的属性
- three.js 源码注释(四十九)Material /MeshNormalMaterial.js
- MeshBasicMaterial 网格基础材质
- three.js 04-04 之 MeshNormalMaterial 材质
- three.js 源码注释(五十三)Material /MeshLambertMaterial.js
- three.js 源码注释(四十六)Material /LineBasicMaterial.js
- three.js 源码注释(五十)Material /MeshPhongMaterial.js
- 38 Three.js高级材质THREE.ShaderMaterial
- 《webgl入门指南》学习笔记二之three.js创建mesh