threejs 灯光投影模型渲染demo

#麻辣小龙虾#

已于 2023-04-17 16:21:42 修改

阅读量797

点赞数 1

分类专栏： threeJs 文章标签：数码相机 html 前端

于 2020-09-29 10:20:58 首次发布

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

版权

threeJs 专栏收录该内容

12 篇文章 7 订阅

订阅专栏

<!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 src="./js/OrbitControls.js"></script>
  <title>sence</title>
  <style>
    *{margin:0;padding:0;}
    body{overflow:hidden;}
  </style>
</head>
<body>
</body>
<script>
  // 创建场景
  let Scene = new THREE.Scene(); 

  // 创建相机
  let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.x = -50;
  camera.position.y = 30;
  camera.position.z = 50;
  camera.lookAt(Scene.position);  // 视角

  // 创建渲染器
  let renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(new THREE.Color(0x000000));
  renderer.shadowMap.enabled = true;
  document.body.appendChild(renderer.domElement);


  // 创建平面
  let planeGeometry = new THREE.PlaneGeometry(60, 60, 1, 1); // 平面网格
  let planeMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc});
  let 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);

  // 创建立方体
  let boxGeometry = new THREE.BoxGeometry(10, 10, 10);
  let boxGeometryMaterial = new THREE.MeshLambertMaterial({color: 0x00ff00});
  let box = new THREE.Mesh(boxGeometry, boxGeometryMaterial);
  box.position.x = 0;
  box.position.y = 5;
  box.position.z = 0;
  box.castShadow = true;
  Scene.add(box);

  // 创建灯光

  // 点光源
  let spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(-60, 40, -20);
  spotLight.castShadow = true;
  Scene.add(spotLight);

  // 平行光
  let directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  // 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
  directionalLight.position.set(-60, 40, -20);
  // 方向光指向对象网格模型mesh2，可以不设置，默认的位置是0,0,0
  directionalLight.target = box;
  Scene.add(directionalLight);

  // 环境光
  let ambient = new THREE.AmbientLight(0x444444);
  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();

</script>
</html>

#麻辣小龙虾#

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
threejs 灯光投影模型渲染demo

<!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"></scr...
复制链接

扫一扫