• 0基础学three.js环境搭建(2)

           这是0基础学three.js系列中的第二篇，在这篇里面我会带着大家把开发环境搭建起来，关于开发环境，方式很多，如果你没有基础，就跟着我的步骤一步一步来，保你不出错。

           首先安装node环境，关于node是干啥的，先不要管，装上就行了，只需要这一个环境，别的都不需要。

         安装node环境：Node.js 安装配置 | 菜鸟教程

         安装好node环境之后，开始搭建three.js项目。

         首先创建一个文件夹three_day01。然后在命令行界面打开该文件夹。然后在命令行界面运行npm init -y初始化文件，先不要管这个命令是干嘛的，运行就行了。运行完之后，会在day01文件夹下面生成一个package.json文件。先不要管这个文件是干嘛，别动他就行了。然后在回到命令行界面安装three.js环境。

         npm install three//安装three环境。

     运行命令

    npm install -D parcel-bundler

      然后打开three_day01文件夹，首先创建index.html文件，在创建一个app.js文件，上述操作全部完成之后，文件夹内容如下

    现在开始，首先编辑app.js文件，放入以下内容。

    1. import * as THREE from 'three';
    2.  
    3. const scene = new THREE.Scene();
    4. const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    5. const renderer = new THREE.WebGLRenderer();
    6.  
    7. renderer.setSize(window.innerWidth, window.innerHeight);
    8. document.body.appendChild(renderer.domElement);
    9.  
    10. const geometry = new THREE.BoxGeometry();
    11. const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    12. const cube = new THREE.Mesh(geometry, material);
    13.  
    14. scene.add(cube);
    15.  
    16. camera.position.z = 5;
    17.  
    18. const animate = function () {
    19.     requestAnimationFrame(animate);
    20.     cube.rotation.x += 0.01;
    21.     cube.rotation.y += 0.01;
    22.     renderer.render(scene, camera);
    23. };
    24.  
    25. animate();

    编辑index.html

     

    1. html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8">
    5.     <title>My first three.js projecttitle>
    6.     <style>
    7.         body { margin: 0; }
    8.         canvas { display: block; }
    9.     style>
    10. head>
    11. <body>
    12.     <script src="app.js">script>
    13. body>
    14. html>

    更新package.json，将package.json文件夹里面的代码替换如下

    1. {
    2.   "name": "three_day01",
    3.   "version": "1.0.0",
    4.   "description": "",
    5.   "main": "index.js",
    6.   "scripts": {
    7.     "start": "parcel index.html"
    8. },
    9.   "keywords": [],
    10.   "author": "",
    11.   "license": "ISC",
    12.   "dependencies": {
    13.     "express": "^4.18.2",
    14.     "three": "^0.156.1"
    15.   }
    16. }

    然后回到命令行运行npm start启动项目。至此项目搭建完毕，已经可以运行了，关于上面的代码先不要注重，先把环境搭建起来，后面每一行代码我都会详细的讲解的，关于上面的代码我也是从别的地方借鉴的，只要是运行起来，是一个绿色的正方体，项目就完成了。

    代码链接：https://pan.baidu.com/s/1iRgFKpqab-WmpAoqr7RCSQ 
    提取码：xp0j

  • 相关阅读:
    paddle 自定义数据集和预处理
    算法——双指针（day1)
    BI　如何让SaaS产品具有 “安全感”和“敏锐感”（上）
    真·画个圆圈诅咒你
    使用Conda
    继承的详解
    Dapr v1.9.0 版本已发布
    百家宴焕新上市，持续深耕100-300元价位段
    论多段图的最短路径问题（我认为本质上还是暴力枚举法）
    数仓开发之DIM层
  • 原文地址：https://blog.csdn.net/qq_40098572/article/details/133146520