three.js入门实例

最新推荐文章于 2025-02-25 17:16:02 发布

油菜花666

最新推荐文章于 2025-02-25 17:16:02 发布

阅读量287

点赞数

分类专栏： Javascript基础

本文链接：https://blog.youkuaiyun.com/rose999ying/article/details/100542072

版权

Javascript基础专栏收录该内容

34 篇文章

订阅专栏

webGL可以直接使用显卡资源来创建高性能的二维和三位图形，三十直接使用webGL编程来创建三位动画场景十分复杂而且容易出问题，所以可以使用three.js来简化这个过程，three.js有什么优点呢：

three.js的有点：

创建简单和复杂的三维几何图形。
在三维场景下创建动画和移动物体。
为物体添加纹理和材质。
使用各种光源来装饰场景。
使用三维模型软件加载物体。
为三维场景添加高级的后期处理效果。
使用自定义的着色器。
创建点云。（即粒子系统）

<!DOCTYPE html>

<html>

<head>
    <title>Example1</title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
</head>
<body>

<div id="WebGL-output">
</div>

<script type="text/javascript">

    // 
    function init() {
      // 首先定义场景
      var scene = new THREE.Scene(); 
      // 定义摄像机
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
      // 定义渲染器对象
      var renderer = new THREE.WebGLRenderer(); 
      renderer.setClearColorHex(0xEEEEEE);
      renderer.setSize(window.innerWidth, window.innerHeight);
      var axes = new THREE.AxisHelper(20); // 创建轴对象
      scene.add(axes); // 将轴添加到场景中
      var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1); // 定义平面的大小
      var planeMeterial = new THREE.MeshBasicMaterial({ color: 0xdedede }); // 定义平面的材质
      var plane = new THREE.Mesh(planeGeometry, planeMeterial); // 创建平面
      plane.rotation.x = -0.5 * Math.PI;
      plane.position.x = 15;
      plane.position.y = 0;
      plane.position.z = 0; // 平面添加到场景之前，先设置平面的位置
      scene.add(plane);
        

        // 创建立方体
      var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
      var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
      var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
      cube.position.x = -4;
      cube.position.y = 3;
      cube.position.z = 0;
      scene.add(cube);
    
    // 创建球体
      var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
      var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x7777ff, wireframe: true });
      var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
      sphere.position.x = 20;
      sphere.position.y = 4;
      sphere.position.z = 2;
      scene.add(sphere);

      // 下面是设置摄像机的位置，

      camera.position.x = -30;
      camera.position.y = 40;
      camera.position.z = 30;
      camera.lookAt(scene.position); // lookAt方法指向场景的中心，默认状态下摄像机是指向(0, 0, 0)
      document.getElementById('WebGL-output').appendChild(renderer.domElement);
      renderer.render(scene, camera);
    }
    window.onload = init

</script>
</body>
</html>