three.js 向量叉乘cross

效果:

代码:

html 复制代码
<template>
  <div>
    <el-container>
      <el-main>
        <div class="box-card-left">
          <div id="threejs"></div>
          <div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// 效果制作器
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
// 渲染通道
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
// 发光描边OutlinePass
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
import {
  CSS2DObject,
  CSS2DRenderer,
} from "three/examples/jsm/renderers/CSS2DRenderer.js";
import TWEEN from "@tweenjs/tween.js";
import {
  CSS3DObject,
  CSS3DSprite,
  CSS3DRenderer,
} from "three/examples/jsm/renderers/CSS3DRenderer.js";
// TextGeometry 是一个附加组件,必须显式导入。 three/examples/jsm/geometries
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";
// FontLoader 是一个附加组件,必须显式导入。
import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
export default {
  data() {
    return {
      scene: null, // 场景对象
      camera: null, // 相机对象
      group: null, // 组对象
      person: null, // 人对象
      renderer: null, // 渲染器对象
      a: new this.$three.Vector3(50, 0, 0),
      b: new this.$three.Vector3(30, 0, 30),

    };
  },
  created() {},
  mounted() {
    this.name = this.$route.query.name;
    this.init();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    /**
     * 如何判断物体是在人的前方还是后方
     * 思路:借助两个单位向量的点乘结果来判断的;
     */
    init() {
      // 创建场景对象
      this.scene = new this.$three.Scene();
      // 创建辅助坐标轴对象
      const axesHelper = new this.$three.AxesHelper(10);
      this.scene.add(axesHelper);
      // 创建相机对象
      this.camera = new this.$three.PerspectiveCamera(60,1,0.01,2000);
      this.camera.position.set(3,3,3);
      this.camera.lookAt(0,0,0);
      this.createArrowHelper(this.a);
      this.createArrowHelper(this.b);

      this.crossVectorsFn();
      // 创建渲染器对象
      this.renderer = new this.$three.WebGLRenderer();
      this.renderer.setSize(1000,800);
      this.renderer.render(this.scene, this.camera);
      window.document.getElementById("threejs").appendChild(this.renderer.domElement);

      const controls = new OrbitControls(this.camera, this.renderer.domElement);
      controls.addEventListener("change", () => {
        this.renderer.render(this.scene, this.camera);
      })
    },
    // 创建箭头用于显示向量的位置
    createArrowHelper(dir) {
      let arrow = new this.$three.ArrowHelper(dir.normalize(), new this.$three.Vector3(0,0,0), 2, 0xffffff);
      this.scene.add(arrow);
    },
    crossVectorsFn() {
      // const c = new this.$three.Vector3();
      // c.crossVectors(this.b, this.a);
      let c = this.b.clone().cross(this.a);
      this.createArrowHelper(c);
    }
  },
};
</script>
<style lang="less" scoped>
.box-card-left {
  display: flex;
  align-items: flex-start;
  flex-direction: row;

  width: 100%;

  .box-right {
    img {
      width: 500px;
      user-select: none;
    }
  }
}
</style>
相关推荐
独好紫罗兰2 分钟前
洛谷题单3-P4956 [COCI 2017 2018 #6] Davor-python-流程图重构
开发语言·python·算法
CHPCWWHSU15 分钟前
vulkanscenegraph显示倾斜模型(5.6)-vsg::RenderGraph的创建
开发语言·javascript·ecmascript
爱看书的小沐24 分钟前
【小沐杂货铺】基于Three.JS绘制太阳系Solar System(GIS 、WebGL、vue、react)
javascript·vue.js·webgl·three.js·地球·太阳系·三维地球
向宇it37 分钟前
【零基础入门unity游戏开发——2D篇】SortingGroup(排序分组)组件
开发语言·unity·c#·游戏引擎·材质
旺代40 分钟前
JavaScript日期对象
开发语言·javascript·ecmascript
nlog3n42 分钟前
Java 桥接模式 详解
java·开发语言·桥接模式
摸鱼仙人~42 分钟前
React: hook相当于函数吗?
前端·javascript·react.js
百锦再43 分钟前
React编程高级主题:错误处理(Error Handling)
前端·javascript·react.js·前端框架·vue·web·angular
军训猫猫头1 小时前
87.在线程中优雅处理TryCatch返回 C#例子 WPF例子
开发语言·ui·c#·wpf
yuanpan1 小时前
如何将python项目打包成Windows环境的exe应用提供给客户使用
开发语言·windows·python