threeJS19-Loader-json - 好文

需要电子档书籍或者源码可以Q群：828202939
<https://blog.csdn.net/weixin_39452320/article/details/85149886?_wv=1027&k=58pY3nD>
希望可以和大家一起学习、一起进步！！

如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，博主会及时修改！！！！！

博主的案例并不难，只是为了更好的给想入门threeJS的同学一点点经验！！！！！

涉及的知识点博主已经从three源码库里面摘要出来放在对应的注释里面！

今天学习three里面json格式模型的加载!这种格式也是官方推荐的格式之一！

效果图：

代码：
<html> <head> <title>threeJS19-Loader-json</title> <style> body {
background-color: #000; margin: 0px; overflow: hidden; } #WebGL { width: 100%;
height: 100%; position: absolute; left: 0; top: 0; z-index: 999; } </style>
</head> <body> <script
src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script
src="../../../build/three.js"></script> <script
src="../../js/controls/OrbitControls.js"></script> <div id="WebGL"></div>
<script> 'use strict'; var container, camera, scene, renderer, geometry,
material, animate, controls; //常用变量 var spotLight, mshStdBox; //自定义对象变量 var
target = new THREE.Vector3(0, 30, 0); var model, skeleton; var webGLW =
$('#WebGL').width(); var webGLH = $('#WebGL').height(); var clock = new
THREE.Clock(); var mixer; //存放动画数据 init(); animate(); function init() {
container = document.getElementById('WebGL'); scene = new THREE.Scene();
scene.background = new THREE.Color(0xcfcfcf); scene.fog = new
THREE.Fog(0xa0a0a0, 200, 1000); //雾 camera = new THREE.PerspectiveCamera(40,
window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 100,
-150); var ambient = new THREE.AmbientLight(0xffffff); scene.add(ambient);
lights(); //灯光：聚光灯 lightsHelper(spotLight); //灯光显示助手 plane() //// 地面 Box();
//旋转的立方体 loadModel(); //添加人物模型 rendererScene(); //场景渲染 OrbitControls(camera,
renderer); //OrbitControls控件模块，90版本鼠标右键上下是移动，96版本之后右键上下是缩放
window.addEventListener('resize', onWindowResize, false); //监听屏幕变化 } function
plane() { // 地面 let grid_mesh = new THREE.Mesh(new
THREE.PlaneBufferGeometry(2000, 2000), new THREE.MeshPhongMaterial({ color:
0x999999, depthWrite: false })); grid_mesh.rotation.x = -Math.PI / 2;
grid_mesh.receiveShadow = true; scene.add(grid_mesh); var grid = new
THREE.GridHelper(2000, 20, 0x000000, 0x000000); grid.material.opacity = 0.2;
grid.material.transparent = true; scene.add(grid); } function Box() { //
BoxGeometry( width, height, depth, widthSegments, heightSegments, depthSegments
) geometry = new THREE.BoxGeometry(80, 5, 80, 3, 3, 3); var matStdObjects = new
THREE.MeshStandardMaterial({ color: 0xA0cf00, roughness: 0, metalness: 0.6 });
mshStdBox = new THREE.Mesh(geometry, matStdObjects); mshStdBox.position.set(0,
-5, 0); mshStdBox.rotation.set(0, Math.PI / 2.0, 0); mshStdBox.castShadow =
true; mshStdBox.receiveShadow = true; scene.add(mshStdBox); } function lights()
{ // SpotLight( color：颜色, intensity：强度, distance：发光距离, angle：角度, penumbra：边缘范围,
decay：衰减 ) spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(10, 120, -30); spotLight.angle = Math.PI / 4;
spotLight.penumbra = 0.05; //边缘范围，反比 spotLight.decay = 2; //衰减系数，反比
spotLight.distance = 400; //发光距离 spotLight.castShadow = true; //阴影
spotLight.shadow.mapSize.width = 1024; spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 10; //近截面 spotLight.shadow.camera.far = 250;
scene.add(spotLight); } function lightsHelper(lightsObject) { //
聚光灯显示助手SpotLightHelper( light:灯光, color：颜色 ) var lightHelper = new
THREE.SpotLightHelper(lightsObject, 0xdfdfdf); scene.add(lightHelper); var mesh
= new THREE.Mesh(new THREE.PlaneBufferGeometry(200, 200), new
THREE.MeshPhongMaterial({ color: 0x9cfcf99, depthWrite: false }));
mesh.rotation.x = -Math.PI / 2; mesh.position.set(0, -20, 0) mesh.receiveShadow
= true; scene.add(mesh); } function loadModel() { //加载模型 // json var loader =
new THREE.JSONLoader();
loader.load('../../models/json/legacy/monster/monster.js', function (geometry,
materials) { material = materials[0]; material.morphTargets = true;
material.color.setHex(0xffaaaa); var mesh = new THREE.Mesh(geometry,
materials); mesh.scale.set(0.05, 0.05, 0.05); mesh.position.set(0,0,50);
mesh.rotation.y = Math.PI /2; console.log('mesh', mesh); //动画部分 mixer = new
THREE.AnimationMixer(mesh); var action =
mixer.clipAction(geometry.animations[0]); action.play(); scene.add(mesh); }); }
function onWindowResize() { camera.aspect = window.innerWidth /
window.innerHeight; camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight); } function
rendererScene() { renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true; renderer.shadowMap.type =
THREE.PCFSoftShadowMap; renderer.gammaInput = true; renderer.gammaOutput =
true; container.appendChild(renderer.domElement); } function
OrbitControls(camera, renderer) { //OrbitControls控件操作模块 controls = new
THREE.OrbitControls(camera, renderer.domElement); controls.target = target;
//控制的target controls.autoRotate = true; //是否自动旋转 controls.autoRotateSpeed =
0.5; //自动旋转速度，正比 } function animate() { requestAnimationFrame(animate); if
(controls) controls.update(); mshStdBox.rotation.y += 0.01; var delta =
clock.getDelta(); if (mixer) mixer.update(delta); renderer.render(scene,
camera); }; </script> </body> </html>

热门工具换一换