three.js 创建变电站场景3D效果-1、集成three.js

最新推荐文章于 2024-05-04 22:53:02 发布

bei风吹走的少年

最新推荐文章于 2024-05-04 22:53:02 发布

阅读量729

点赞数 6

分类专栏： three.js 文章标签： javascript 3d 开发语言

本文链接：https://blog.csdn.net/weixin_42476367/article/details/134671941

版权

three.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

three.js 创建变电站场景3D效果-1、集成three.js

开始闲扯
three中文官网
集成three.js

开始闲扯

传统行业软件公司啥牛逼的技术也学不到，时间一久那个焦虑啊，当前又这个环境，指不定哪天就失业了哇！！！唉，可怜的打工人。。。

说一下为啥会有这个文章：经常项目汇报看到其他公司的项目，那啥大屏、数字孪生、甭管功能怎么样，起码华丽，看起来就高大上；再看自己的，后台管理系统、报表查询…草了，难怪处于优化的边缘。。

最近公司碰到个硬茬客户，非要3D效果，公司这破技术哪会搞，找外包人家要10个W，好心疼啊；于是就叫我们高试试，试试就试试，嘿嘿嘿。。。。

three中文官网

链接: three中文官网
http://www.webgl3d.cn/
在这里插入图片描述
找到官网，发现是VUE的语法，艹，我这捞逼系统是thymeleaf+jquery，不过还好，人家是支持的。Vue怎么引入，网上很多，我就不写了。。

集成three.js

第一步 需要先放置three的资源库，在examples/jsm 子目录下，我呢先把jsm下载到本地；

我的项目是有地址映射的，没有的可以试试放到项目static目录，当然我是不建议，毕竟这个包有点大:

包放好后，接下来可进行第二步，引入three.js到页面.
第二步引入three.js到页面；

<script type="importmap">
      {
         "imports": {
            "three": "/profile/upload/model/oncewiring/three.module.js",
            "three/addons/": "/profile/upload/model/oncewiring/jsm/"
         }
      }
</script>
<script type="module">
	import * as THREE from 'three';
	
	
</script>

到此，js已经引入到页面。
3. 第三步 创建3D效果必备元素：场景、摄像机、光源、渲染器、控制器等；

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('3D')"/>
</head>
<body>
<div>
    <!-- glb展示 -->
    <div id="glb-content"></div>
</div>
<script type="importmap">
      {
         "imports": {
            "three": "/profile/upload/model/oncewiring/three.module.js",
            "three/addons/": "/profile/upload/model/oncewiring/jsm/"
         }
      }
</script>
<script type="module">
    import * as THREE from 'three';
    import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
    var scene, camera, renderer, orbitControls, loader;
    $(function () {
        init();
    });
    function init() {
        // 创建场景
        scene = new THREE.Scene();
        // 创建相机[正交投影照相机]
        camera = new THREE.PerspectiveCamera(55, window.innerWidth/window.innerHeight, 0.01, 1000);
        camera.position.set(60, 15, 0); // 位置
        camera.lookAt(scene.position); // 位置
        scene.add(camera); // 添加到场景中
        // 创建光源[平行光]
        const directionalLight = new THREE.DirectionalLight(0xffffff, 8); // 颜色
        directionalLight.position.set(80, 100, 80); // 位置
        directionalLight.angle = Math.PI / 10; // 设置投影的程度
        directionalLight.castShadow = true; // 开启阴影投射
        scene.add(directionalLight);
        // 创建渲染器
        renderer = new THREE.WebGLRenderer({antialias: true, logarithmicDepthBuffer: true});
        renderer.setClearColor(0x0a2730); // 渲染初始颜色
        renderer.setSize(window.innerWidth, window.innerHeight); // canvas画面大小
        renderer.shadowMap.enabled = true; // 设置渲染支持3d投影
        document.getElementById("glb-content").appendChild(renderer.domElement); // 添加到html元素
        // 创建地面
        let planeGeometry = new THREE.PlaneGeometry(30, 20); // 大小
        let planeMaterial = new THREE.MeshStandardMaterial({ color: 0x123e1e }); // 材质
        let plane = new THREE.Mesh(planeGeometry, planeMaterial); // 创建地面
        plane.rotation.x = -0.5 * Math.PI;  // 旋转
        plane.position.set(0, 0, 0);  // 位置
        scene.add(plane);

        // 创建控制器
        orbitControls = new OrbitControls(camera, renderer.domElement);
        orbitControls.addEventListener('change', ()=>{
            renderer.render(scene, camera);
        });
        orbitControls.minDistance = 1;
        orbitControls.maxDistance = 1000;
        orbitControls.enableDamping = true;
        orbitControls.enablePan = true; // 开启右键拖拽
        window.addEventListener('resize', onWindowResize, false);
    }
    function onWindowResize() {
        camera.aspect = window.innerWidth/window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }
</script>
</body>
</html>