关于Three.js中camera部分属性测试界面

最新推荐文章于 2024-05-20 08:47:19 发布

飞翔的小菜鸡

最新推荐文章于 2024-05-20 08:47:19 发布

阅读量756

点赞数

分类专栏：我的three.js 文章标签： three.js

本文链接：https://blog.csdn.net/ck2580/article/details/79603270

版权

我的three.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

关于Three.js中camera部分属性测试界面-20210402更新

最近学习Three.js时觉得图形形状很有趣，于是做出了一些模拟的动态图与camera属性测试的页面，因为对我这种初学者来说，想要理解这些属性就要学着边改边理解，但是重复修改代码会很麻烦，希望这个页面可以帮助初学者理解其中的一些属性，需导入three.js

<!DOCTYPE >
<html>
  <head>
    <meta charset="utf-8" />
  </head>

  <body onload="change()" style="display: flex">
    <canvas
      id="mainCanvas"
      width="400px"
      height="400px"
      style="flex: 0; height: 400px; width: 400px"
    ></canvas>
    <div style="flex: 1">
      cameraPosition:
      <hr />
      X:<input
        class="camera"
        id="x"
        type="number"
        value="5"
        onchange="change()"
      />
      y:<input
        class="camera"
        id="y"
        type="number"
        value="5"
        onchange="change()"
      />
      z:<input
        class="camera"
        id="z"
        type="number"
        value="5"
        onchange="change()"
      /><br />
      Graphical:
      <hr />
      <select id="GraphicalSelect" onchange="change()">
        <option value="cube" selected="selected">正方体</option>
        <option value="plane">长方形</option>
        <option value="goble">球</option>
        <option value="circle">扇形</option>
        <option value="toru">圆环</option>
        <option value="torus">圆环结</option>
      </select>
      <hr />
      <button onclick="changeDistance('appear')">距离拉近</button>
      <button onclick="changeDistance('far')">距离拉远</button>
      <button onclick="spin()">旋转</button>
      <button onclick="stopSpin()">停止旋转</button>
    </div>
    <script type="text/javascript" src="three.js"></script>

    <script type="text/javascript">
      var Pattern;
      var camera;
      var scene;
      var renderer;
      var sinxD;
      var cosxD;
      var setIntervalId = null;
      var position = 0;
      var isSpin = false;
      function changeDistance(type) {
        var x = document.getElementById("x");
        var y = document.getElementById("y");
        var z = document.getElementById("z");
        if (type === "appear") {
          x.value = parseInt(x.value, 10) - 2;
          y.value = parseInt(y.value, 10) - 2;
          z.value = parseInt(z.value, 10) - 2;
        } else {
          x.value = parseInt(x.value, 10) + 2;
          y.value = parseInt(y.value, 10) + 2;
          z.value = parseInt(z.value, 10) + 2;
        }
        if (isSpin) {
          stopSpin();
          camera.lookAt(new THREE.Vector3(0, 0, 0));
          camera.position.set(x.value, y.value, z.value);
          renderer.render(scene, camera);
          spin();
        } else {
          camera.lookAt(new THREE.Vector3(0, 0, 0));
          camera.position.set(x.value, y.value, z.value);
          renderer.render(scene, camera);
        }
      }
      function spin() {
        if (!setIntervalId) {
          isSpin = true;
          setIntervalId = setInterval(() => {
            position += (Math.PI * 1) / 360;
            var x = document.getElementById("x");
            var y = document.getElementById("y");
            var z = document.getElementById("z");
            // 默认环绕半径100的圆旋转，x位置为sinx，y位置为cosx
            x.value = Math.sin(position) * 50 ** 0.5;
            z.value = Math.cos(position) * 50 ** 0.5;
            y.value = parseInt(y.value, 10);
            camera.lookAt(new THREE.Vector3(0, 0, 0));

            camera.position.set(x.value, y.value, z.value);
            renderer.render(scene, camera);
          }, 100);
        }
      }
      function stopSpin() {
        isSpin = false;
        clearInterval(setIntervalId);
        setIntervalId = null;
      }
      function init(x, y, z, graphical) {
        // renderer
        if (!renderer) {
          renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById("mainCanvas"),
          });
          renderer.setClearColor(0x000000); // black
        }

        if (!scene) {
          // scene
          scene = new THREE.Scene();
        }
        console.log(scene);

        if (!camera) {
          // camera
          camera = new THREE.PerspectiveCamera(
            Number(45),
            Number(400 / 400),
            Number(1),
            Number(100)
          );
        }

        camera.position.set(x, y, z);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        scene.add(camera);
        scene.clear();
        var Pattern2 = select(graphical);
        scene.add(Pattern2);
        renderer.render(scene, camera);
      }
      function select(selected) {
        if (selected == "cube") {
          Pattern = new THREE.Mesh(
            new THREE.BoxGeometry(2, 2, 2, 2, 2, 2),
            new THREE.MeshBasicMaterial({
              color: 0xff0000,
              wireframe: true,
            })
          );
        }
        if (selected == "plane") {
          Pattern = new THREE.Mesh(
            new THREE.BoxGeometry(2, 2),
            new THREE.MeshBasicMaterial({
              color: 0xffffff,
              wireframe: true,
            })
          );
        }
        if (selected == "goble") {
          Pattern = new THREE.Mesh(
            new THREE.SphereGeometry(2, 18, 12),
            new THREE.MeshBasicMaterial({
              color: 0xff0000,
              wireframe: true,
            })
          );
        }
        if (selected == "circle") {
          Pattern = new THREE.Mesh(
            new THREE.CircleGeometry(2, 18, Math.PI / 3, (Math.PI / 3) * 4),
            new THREE.MeshBasicMaterial({
              color: 0xffffff,
              wireframe: true,
            })
          );
        }
        if (selected == "toru") {
          Pattern = new THREE.Mesh(
            new THREE.TorusGeometry(1, 0.5, 4, 8),
            new THREE.MeshBasicMaterial({
              color: 0xffffff,
              wireframe: true,
            })
          );
        }
        if (selected == "torus") {
          Pattern = new THREE.Mesh(
            new THREE.TorusKnotGeometry(1.5, 0.5, 32, 8),
            new THREE.MeshBasicMaterial({
              color: 0xffffff,
              wireframe: true,
            })
          );
        }
        return Pattern;
      }
      function change() {
        var x = document.getElementById("x").value;
        var y = document.getElementById("y").value;
        var z = document.getElementById("z").value;
        var myselect = document.getElementById("GraphicalSelect");
        var index = myselect.selectedIndex;
        var graphical = myselect.options[index].value;
        init(x, y, z, graphical);
      }
    </script>
  </body>
</html>

运行结果图片:
在这里插入图片描述

参考资料:http://www.ituring.com.cn/book/miniarticle/58552

飞翔的小菜鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于Three.js中camera部分属性测试界面

关于Three.js中camera部分属性测试界面最近学习Three.js时觉得图形形状很有趣，于是做出了一些模拟的动态图与camera属性测试的页面，因为对我这种初学者来说，想要理解这些属性就要学着边改边理解，但是重复修改代码会很麻烦，希望这个页面可以帮助初学者理解其中的一些属性，需导入three.js&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHT...
复制链接

扫一扫