美文网首页
Threejs学习之旅一

Threejs学习之旅一

作者: 鐵衣 | 来源:发表于2020-12-02 11:39 被阅读0次

    配置开发环境
    因为我这边是用的Vue作为前端基础框架所以我们先安装Vue
    Vue Install :

    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli
    

    Create a project:

    vue create my-project
    # OR
    vue ui
    

    安装Threejs

    yarn add three
    # OR
    yarn add three
    

    引入使用

    <script>
    import * as THREE from "three";
    let camera, scene, renderer;
    let geometry, material, mesh;
    export default {
      data() {
        return {
          name: "",
        };
      },
      created() {
        this.init();
        this.animate();
      },
      methods: {
        init() {
          //场景(scene)、相机(camera)和渲染器(renderer)
          camera = new THREE.PerspectiveCamera(
            70,
            window.innerWidth / window.innerHeight,
            0.01,
            10
          ); // 创建透视相机
          camera.position.z = 1;
    
          scene = new THREE.Scene(); // 创建场景
    
          geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
          material = new THREE.MeshNormalMaterial();
    
          mesh = new THREE.Mesh(geometry, material);
          scene.add(mesh);
    
          renderer = new THREE.WebGLRenderer({ antialias: true }); // 创建渲染器
          renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器大小
          document.body.appendChild(renderer.domElement);
        },
        animate() {
          requestAnimationFrame(this.animate); //渲染循环
          mesh.rotation.x += 0.01;
          mesh.rotation.y += 0.02;
          renderer.render(scene, camera); // 渲染render( scene, camera, renderTarget, forceClear ) scene:前面定义的场景 camera:前面定义的相机renderTarget:渲染的目标,默认是渲染到前面定义的render变量中forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除
        },
      },
    };
    </script>
    

    运行看到如下效果,说明配置成功


    image.png

    相关文章

      网友评论

          本文标题:Threejs学习之旅一

          本文链接:https://www.haomeiwen.com/subject/limywktx.html