threejs加载C4D模型及材质渲染实例

最新推荐文章于 2024-08-13 10:31:00 发布

#麻辣小龙虾#

最新推荐文章于 2024-08-13 10:31:00 发布

阅读量5.5k

点赞数 4

分类专栏： threeJs

本文链接：https://blog.csdn.net/CodingNoob/article/details/108983443

版权

threeJs 专栏收录该内容

12 篇文章 7 订阅

订阅专栏

最近在学习Threejs3D引擎使用，主要是为了实现web里面去实现3D模型的加载渲染，这样会比较直观的看到类似的效果，增加用户体验。

第一步：加载C4D模型。将模型和材质导出

二、加载主要插件模块

<script type="text/javascript" charset="UTF-8" src="./libs/three/loaders/MTLLoader.js"></script><script type="text/javascript" charset="UTF-8" src="./libs/three/loaders/OBJLoader.js"></script>

这两个插件模块主要是为了加载导出的模型和材质。

第三、直接页面添加灯光场景进行渲染

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://www.yanhuangxueyuan.com/3D/example/three.min.js"></script>
  <script type="text/javascript" charset="UTF-8" src="./libs/three/loaders/MTLLoader.js"></script>
  <script type="text/javascript" charset="UTF-8" src="./libs/three/loaders/OBJLoader.js"></script>
  <script src="./js/OrbitControls.js"></script>
  <title>threejs小例子</title>
  <style>
    *{margin:0;padding:0}
    body{overflow:hidden;}
  </style>
</head>

<body>

</body>
<script>

  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 = 30
  camera.lookAt(scene.position);



  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  // 设置渲染器渲染阴影效果
  renderer.setClearColor(new THREE.Color(0x000000));
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true;



  var planeGeometry = new THREE.PlaneGeometry(60, 60, 60, 1);
  var planeMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc});
  var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.x = 0
  plane.position.y = 0
  plane.position.z = 0
  plane.receiveShadow = true; // 设置投影
  scene.add(plane);

  new THREE.MTLLoader().load('./models/box.mtl', function (materials) {
    materials.preload();
    new THREE.OBJLoader().setMaterials(materials).load('./models/box.obj', function (object) {
      object.traverse((child) => {
        child.castShadow = true;
        child.receiveShadow = true;
      })
      scene.add(object);
    });
  });




  var spotLight = new THREE.DirectionalLight(0xffffff);
  spotLight.position.set(-40, 260, 140);
  spotLight.castShadow = true;
  scene.add( spotLight );
  // 设置投影
  

  // 环境光
  let ambient = new THREE.AmbientLight(0x444444, 1);
  scene.add(ambient);//环境光对象添加到scene场景中

  let controls = new THREE.OrbitControls(camera, renderer.domElement);
  // 添加辅助坐标轴
  let axisHelper = new THREE.AxisHelper(250);
  scene.add(axisHelper);

  function render () {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }

  render(scene, camera);
</script>

</html>