threeJs

最新推荐文章于 2024-08-09 21:30:00 发布

大聂不优秀

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量369

点赞数

分类专栏：项目总结文章标签：前端

本文链接：https://blog.csdn.net/qq_45503686/article/details/123688100

版权

项目总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

核心元素：Scene、camera、Mesh(geometry,material)、Light、render

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

<head>

  <head charset="utf-8">
    <title>title</title>
  </head>

<body>
  <div id="webgl-three"></div>
  <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script>

  <script>
    let scene = new THREE.Scene();
    // Creates a new Camera. Note that this class is not intended to be called directly; you probably want a PerspectiveCamera or OrthographicCamera instead.
    /*
      fov — Camera frustum vertical field of view.
      aspect — Camera frustum aspect ratio.
      near — Camera frustum near plane.
      far — Camera frustum far plane.
    */
    let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 5000);
    camera.position.x = 4;
    camera.position.y = 2;
    camera.position.z = 4;
    camera.lookAt(scene.position);
    // 添加几何体 + 材质
    // http://www.webgl3d.cn/threejs/docs/#api/zh/geometries
    let geometry = new THREE.BoxGeometry(4, 2, 4);
    // https://www.webgl3d.cn/threejs/docs/#api/zh/materials
    var material = new THREE.MeshLambertMaterial({
      color: 0x000000
    });
    // 网格
    /**
     * geometry —— （可选）Geometry或者BufferGeometry的实例，默认值是一个新的BufferGeometry。
       material —— （可选）一个Material，或是一个包含有Material的数组，默认是一个新的
     */
    // http://www.webgl3d.cn/threejs/docs/#api/zh/objects/Mesh
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    // 光
    // http://www.webgl3d.cn/threejs/docs/#api/zh/lights/Light
    let spotLight = new THREE.SpotLight();
    spotLight.position.set(3, 10, 5);
    scene.add(spotLight);
    // WebGL Render 用WebGL渲染出你精心制作的场景。
    // http://www.webgl3d.cn/threejs/docs/#api/zh/renderers/WebGLRenderer
    let renderer = new THREE.WebGLRenderer({
      antialias: true
    })
    renderer.setClearColor(new THREE.Color("#EEE8AA"));
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById("webgl-three").appendChild(renderer.domElement);
    // 按帧刷新
    render();
    console.log("scene", scene);

    function render() {
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }
  </script>
</body>

</head>

大聂不优秀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
threeJs

核心元素：Scene、camera、Mesh(geometry,material)、Light、render<!DOCTYPE html><html lang="en"><head> <head charset="utf-8"> <title>title</title> </head><body> <div id="webgl-three"></div>
复制链接

扫一扫

专栏目录