master

分支 (1)

管理

管理

master

threejs_exercise
/
13-vector.html

<!DOCTYPE html>
<html>

<head>
  <title>My first three.js app</title>
  <style>
    body {
      margin: 0;
    }

    canvas {
      width: 100%;
      height: 100%
    }
  </style>
</head>

<body>
  <script src="js/three.js"></script>
  <script src="./js/stats.min.js"></script>
  <script src="./js/OrbitControls.js"></script>
  <script>
    // 创建创建
    var scene = new THREE.Scene();
    // 创建透视相机
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    // 设置渲染器的尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    new THREE.OrbitControls(camera, renderer.domElement);

    var red = new THREE.Color(0xff0000)

    // 创建几何体
    var geometry = new THREE.BoxBufferGeometry(1, 1, 1, 3, 3, 3);
    // 创建材质
    var material = new THREE.MeshBasicMaterial({
      color: 0x00ff00,
      wireframe: true, // 渲染成功线框图
      wireframeLinewidth: 3,
      wireframeLinecap: 'butt'
    });
    // 集合  mesh 网络
    var cube = new THREE.Mesh(geometry, material);
    cube.position.set(-3, 0, 0);
    console.log(cube);

    scene.add(cube);


    // 创建几何体
    var geometry = new THREE.SphereGeometry(1, 16, 16);
    // 创建材质
    var material = new THREE.MeshBasicMaterial({
      color: 0x00ff00,
      wireframe: true, // 渲染成功线框图
      wireframeLinewidth: 3,
      wireframeLinecap: 'butt'
    });
    // 集合  mesh 网络
    var sphere = new THREE.Mesh(geometry, material);
    sphere.position.set(3, 0, 0);

    scene.add(sphere);


    var geometry = new THREE.BufferGeometry();

    //类名模型数据 创建订定点数组
    var vertices = new Float32Array([
      0, 0, 0,
      5, 0, 0,
      0, 5, 0,
      0, 0, 10,
      0, 0, 5,
      0, 10, 0
    ]);

    var attribute = new THREE.BufferAttribute(vertices, 3);

    geometry.attributes.position = attribute;

    // 默认以 绘制成面
    var material = new THREE.MeshBasicMaterial({
      color: 0xffff00,
      side: THREE.DoubleSide
    });

    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    var material = new THREE.LineBasicMaterial({
      color: 0xff0000,
      width: 5
    });

    var line = new THREE.Line(geometry, material);

    scene.add(line);

    var material = new THREE.PointsMaterial({
      color: 0x888888,
      size: 1
    });

    var point = new THREE.Points(geometry, material);

    scene.add(point);


    scene.background = new THREE.Color(0x004499);

    camera.position.z = 3;
    camera.position.x = 3;
    camera.position.y = 3;
    camera.lookAt(cube.position)
    // 动画
    var animate = function () {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };

    animate();


    // 监视器
    var stats = new Stats();
    stats.setMode(1); // 0: fps, 1: ms
    // 将stats的界面对应左上角
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    document.body.appendChild(stats.domElement);
    setInterval(function () {
      stats.begin();
      // 你的每一帧的代码
      stats.end();
    }, 1000 / 60);
  </script>
</body>

</html>