精华内容
下载资源
问答
  • vue + threejs 实现3d装车

    2021-07-23 09:34:52
    npm install threejs -D 引用threejs import * as THREE from 'three' // 鼠标控制器 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' // obj模型 import { OBJLoader } from '...

    安装

    npm install threejs -D
    

    引用threejs

    import * as THREE from 'three'
    // 鼠标控制器
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
    // obj模型
    import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
    // 材质
    import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
    

    场景
    在threejs中场景就只有一种,用THREE.Scene来表示,要构建一个场景只要new一个对象就可以了。

     this.scene = new THREE.Scene()
    

    属性

    属性描述
    children数组,用于存储添加到场景中的所有对象
    fog雾化,雾化效果的特点是场景中的物体离得越远就会变得越模糊,有三个参数:雾的颜色,最近距离,最远距离

    方法

    方法描述
    Add()向场景中添加对象
    Remove()移除场景中的对象
    getObjectByName()获取场景中指定名称的对象
    tranverse()以一个方法作为参数,这个方法将会在每一个子对象上执行。如果子对象本身还有子对象,该方法将会在所有的子对象上执行,直到遍历完场景树中的所有对象为止

    相机
    相机决定了场景中那个角度的景色会显示出来,相机就像人的眼睛一样,站在不同的位置,抬头或者低头都能看到不同的景色。分为两种正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。
    正投影与透视透视投影区别
    正投影相机
    OrthographicCamera( left, right, top, bottom, near, far )

    1. left: 渲染空间的左边界
    2. right: 渲染空间的右边界
    3. top:渲染空间的上边界
    4. bottom:渲染空间的下边界
    5. near: near属性表示的是从距离相机多远的位置开始渲染,一般情况会设置一个很小的值。 默认值0.1
    6. far:far属性表示的是距离相机多远的位置截止渲染,如果设置的值偏小小,会有部分场景看不到。 默认值1000

    透视投影相机
    PerspectiveCamera( fov, aspect, near, far )

    this.camera = new THREE.PerspectiveCamera(45, this.rendererWidth / this.rendererHeight, 0.1, 10000000)
    
    1. fov: 视角fov,视角的大小,如果设置为0,相当你闭上眼睛了,所以什么也看不到,如果为180,那么可以认为你的视界很广阔,但是在180度的时候,往往物体很小,因为他在你的整个可视区域中的比例变小了。一般情况下45
    2. near: 表示你近处的裁面的距离,也可以认为是眼睛距离近处的距离(>0)
    3. aspect: 实际窗口的纵横比,即宽度除以高度。这个值越大,说明你宽度越大,那么你可能看的是宽银幕电影了,如果这个值小于1

    渲染器
    Three.js中的场景是一个物体的容器,开发者可以将需要的角色放入场景中;
    相机的作用就是面对场景,在场景中取一个合适的景,把它拍下来;
    渲染器的作用就是将相机拍摄下来的图片,放到浏览器中去显示。
    new THREE.WebGLRenderer()

    属性含义
    antialias是否开启反锯齿,设置为true开启反锯齿。
    alpha是否可以设置背景色透明。
    maxLights最大灯光数,我们的场景中最多能够添加多少个灯光。
    logarithmicDepthBuffer模型的重叠部位不停的闪烁。这便是Z-Fighting问题,为解决这个问题,我们可以采用该种方法
    方法含义
    setSize制定渲染器的宽高,renderer.setSize(width,height)
    setClearColor设置canvas背景色(clearColor)和背景色透明度(clearAlpha)
    setPixelRatio设置分辨率,解决场景模糊,抗锯齿的一种很好的方法
     this.renderer = new THREE.WebGLRenderer({
      antialais: true,
        alpha: true,
        logarithmicDepthBuffer: true,
      })
      this.renderer.setSize(this.rendererWidth, this.rendererHeight)
      this.renderer.setClearColor(0x39609b)
      this.renderer.setPixelRatio(window.devicePixelRatio)
      const container = document.getElementById('canvasContainer')
      container.appendChild(this.renderer.domElement)
    

    threejs中的坐标系
    在这里插入图片描述
    threejs中的灯光

    光源种类含义
    环境光(AmbientLight)笼罩在整个空间无处不在的光,不能产生阴影
    点光源(PointLight )向四面八方发射的单点光源,不能产生阴影
    聚光灯(SpotLight )锥形效果的光源,能够产生阴影
    平行光(DirectinalLight)平行光,类似太阳光,距离很远的光,会产生阴影
    // 环境光
    this.ambient = new THREE.AmbientLight(0xffffff, 1)
    this.ambient.position.set(0, 0, 0)
    this.scene.add(this.ambient)
    // 平行光
    this.directionalLight = new THREE.DirectionalLight(0xffffff, 0.3)
    this.directionalLight.position.set(0, 200, 0)
    this.scene.add(this.directionalLight)
    // 设置点光源
    this.pointLight1 = new THREE.PointLight(0xffffff, 0.3)
    this.pointLight1.position.set(-500, 200, 0)
    this.scene.add(this.pointLight1)
    this.pointLight2 = new THREE.PointLight(0xffffff, 0.3)
    this.pointLight2.position.set(500, 200, 0)
    this.scene.add(this.pointLight2)
    

    模型加载
    实际开发中,大多数项目,通常是3D美术设计师或建筑、机械等行业工程师提供的由3dmx、blender、substence、Solidworks等软件创建好的三维模型文件
    1.加载.obj模型文件:
    使用三维软件导出 .obj 模型文件的时候,会同时导出一个材质文件 .mtl , .obj 和 .stl 文件包含的信息一样都是几何体顶点相关数据,材质文件 .mtl 包含的是模型的材质信息,比如颜色、贴图路径等。
    加载 .obj 三维模型的时候,可以只加载 .obj 文件,然后借助three.js引擎自定义材质Material,也可以同时加载 .obj 和 .mtl 文件。
    只加载obj文件:

    <!-- 引入obj模型加载库OBJLoader.js -->
    <script src="../../three.js-master/examples/js/loaders/OBJLoader.js"></script>
    
    /**
    * OBJ文件加载 只加载obj文件中的几何信息,不加载材质文件.mtl
    */
    var loader = new THREE.OBJLoader();
    // 没有材质文件,系统自动设置Phong网格材质
    loader.load('./立方体/box.obj',function (obj) {
    // 控制台查看返回结构:包含一个网格模型Mesh的组Group
    console.log(obj);
    // 查看加载器生成的材质对象:MeshPhongMaterial
    console.log(obj.children[0].material);
    scene.add(obj);
    })
    
    // 加载后的一些编辑操作
    obj.children[0].scale.set(20,20,20);//网格模型缩放
    obj.children[0].geometry.center();//网格模型的几何体居中
    obj.children[0].material.color.set(0xff0000);//设置材质颜色
    

    同时加载obj文件和mtl文件:
    mtl 文件包含了模型的材质信息,比如模型颜色、透明度等信息,还有纹理贴图的路径,比如颜色贴图、法线贴图、高光贴图等等。

    <!-- 引入obj模型加载库OBJLoader.js -->
    <script src="../../three.js-master/examples/js/loaders/OBJLoader.js"></script>
    <!-- 引入obj模型材质加载库MTLLoader.js -->
    <script src="../../three.js-master/examples/js/loaders/MTLLoader.js"></script>
    /**
    * OBJ和材质文件mtl加载
    */
    var OBJLoader = new THREE.OBJLoader();//obj加载器
    var MTLLoader = new THREE.MTLLoader();//材质文件加载器
    MTLLoader.load('./立方体/box.mtl', function(materials) {
    // 返回一个包含材质的对象MaterialCreator
    console.log(materials);
    //obj的模型会和MaterialCreator包含的材质对应起来
    OBJLoader.setMaterials(materials);
    OBJLoader.load('./立方体/box.obj', function(obj) {
    console.log(obj);
    obj.scale.set(10, 10, 10); //放大obj组对象
    scene.add(obj);//返回的组对象插入场景中
    })
    })
    

    完整代码:

    // html
    <div id="canvasContainer" />
    // js
    // json 数据
    const pageData = {container: {length: 15670,width: 2870,height: 3300,},
      boxlist: [{color: 'rgba(235,215,0,0.5)',x: 0,length: 2120, width: 1200,y: 0,z: 0,boxId: '5GD821021(左前叶子板)_1',height: 1640,},
        { color: 'rgba(235,0,215,0.5)',x: 0,length: 2120,width: 1200,y: 1200,z: 0,boxId: '5GD821022(右前叶子板)_1',height: 1640,},
        {color: 'rgba(215,215,30,0.5)',: 2120,length: 1785,width: 2160,y: 0,z: 0,boxId: '5GD823031(发动机盖总成)_1',height: 1530,},
        {color: 'rgba(215,215,30,0.5)',x: 2120,length: 1785,width: 2160,y: 0,z: 1530,boxId: '5GD823031(发动机盖总成)_1', height: 1530,},
        {color: 'rgba(215,30,215,0.5)',x: 3905,length: 1700,width: 2150,y: 0,z: 0,boxId: '3CG827025E(后+R58+F57:Q57)_1',height: 1450,},
        {color: 'rgba(215,195,60,0.5)',x: 3905,length: 1700, width: 2150,y: 0,z: 1450,boxId: '3CG827025E(后+R58+F57:Q57)_1',height: 1450,},
        {color: 'rgba(195,215,60,0.5)',x: 5605,length: 2160,width: 1350,y: 0,z: 0,boxId: '3CG831055D(左前门焊接总成)_1',height: 1700,},
        {color: 'rgba(195,60,215,0.5)',x: 5605,length: 2150,width: 1330,y: 0,z: 1700,boxId: '5DD831055(左前门)_1',height: 1465,},
        {color: 'rgba(215,175,90,0.5)',x: 7765,length: 2160,width: 1350, y: 0,z: 0,boxId: '3CG831056D(右前门焊接总成)_1',height: 1700,},
        {color: 'rgba(175,215,90,0.5)',x: 7765,length: 2150,width: 1330,y: 0,z: 1700,boxId: '5DD833056(右后门)_1',height: 1465,},
        {color: 'rgba(175,90,215,0.5)',x: 9925,length: 2160,width: 1350,y: 0,z: 0,boxId: '3CG831056D(右前门焊接总成)_2',height: 1700,},
        {color: 'rgba(215,155,120,0.5)',x: 9925,length: 2150,width: 1330,y: 0,z: 1700,boxId: '5GD831055A(左前门)_1', height: 1465,},
        {color: 'rgba(155,215,120,0.5)',x: 12085,length: 2160,width: 1280,y: 0,z: 0,boxId: '2GG831051(车门)_1',height: 1560,},
        { color: 'rgba(155,120,215,0.5)',x: 12085,length: 2160, width: 1280,y: 0,z: 1560,boxId: '2GG831051(车门)_1',height: 1560,},
        {color: 'rgba(215,135,150,0.5)',x: 14245,length: 1280,width: 1800,y: 0,z: 0,boxId: '2GG821101(翼子板)_1',height: 1500,},
        {color: 'rgba(135,215,150,0.5)',x: 14245,length: 1280,width: 1800,y: 0,z: 1500,boxId: '2GG821102(翼子板)_1',height: 1500,},
        {color: 'rgba(135,150,215,0.5)',x: 5605,length: 2120,width: 1200, y: 1350,z: 0,boxId: '5GD821021(左前叶子板)_1',height: 1640,},
        {'color': 'rgba(215,115,180,0.5)',x: 7725,length: 2120,width: 1200,y: 1350, z: 0,boxId: '5GD821021(左前叶子板)_2',height: 1640,},
        {color: 'rgba(115,215,180,0.5)',x: 9845,length: 2120,width: 1200,y: 1350,z: 0,boxId: '5GD821021(左前叶子板)_3',height: 1640,},
        {color: 'rgba(115,180,215,0.5)',x: 12085,length: 2160,width: 1280,y: 1280,z: 0, boxId: '5GD833055A(左后门)_1',height: 1480,},
        {color: 'rgba(215,95,210,0.5)', x: 12085,length: 2160,width: 1280,y: 1280,z: 1480,boxId: '5GD833056A(右后门)_1',height: 1480,},,}
    export default {
      data(){
        return {
           renderer: null, // 渲染器
    		scene: null, // 场景
    		camera: null, // 相机
    		ambient: null, // 环境光
    		directionalLight: null, // 平行光
    		pointLight1: null, // 点光源1
    		pointLight2: null, // 点光源2
    		controls: null, // 轨道控件
    		carLength: 0,
    	    carHeight: 0,
    	    carWidth: 0,
        }
      },
      methods: {
            threeInit() {
          // 初始化渲染器
          this.initThree()
          // 初始化场景
          this.initScene()
          // 初始化相机
          this.initCamera()
          // 初始化灯光
          this.initLight()
          // 加载obj文件
          this.initAgv()
          // 初始化控件
          this.initControls()
          // 循环渲染
          this.animation()
        },
        initThree() {
          this.renderer = new THREE.WebGLRenderer({
            antialais: true,
            alpha: true,
            logarithmicDepthBuffer: true,
          })
          this.renderer.setSize(this.rendererWidth, this.rendererHeight)
          this.renderer.setClearColor(0x39609b)
          this.renderer.setPixelRatio(window.devicePixelRatio)
          const container = document.getElementById('canvasContainer')
          container.appendChild(this.renderer.domElement)
        },
        initScene() {
          this.scene = new THREE.Scene()
        },
        initCamera() {
          this.camera = new THREE.PerspectiveCamera(45, this.rendererWidth / this.rendererHeight, 0.1, 10000000)
          // 相机位置
          var conta = { length: pageData.container.length, width: pageData.container.width, height: pageData.container.height }
          this.camera.position.set(conta.length * 2, conta.width * 2, conta.height * 2)
          // 相机朝向
          this.camera.lookAt(this.scene.position)
          this.scene.add(this.camera)
        },
        initLight() {
          // 环境光
          this.ambient = new THREE.AmbientLight(0xffffff, 1)
          this.ambient.position.set(0, 0, 0)
          this.scene.add(this.ambient)
          // 平行光
          this.directionalLight = new THREE.DirectionalLight(0xffffff, 0.3)
          this.directionalLight.position.set(0, 200, 0)
          this.scene.add(this.directionalLight)
          // 设置点光源
          this.pointLight1 = new THREE.PointLight(0xffffff, 0.3)
          this.pointLight1.position.set(-500, 200, 0)
          this.scene.add(this.pointLight1)
          this.pointLight2 = new THREE.PointLight(0xffffff, 0.3)
          this.pointLight2.position.set(500, 200, 0)
          this.scene.add(this.pointLight2)
        },
        initAgv() {
          const objLoader = new OBJLoader()
          const mtlLoader = new MTLLoader()
          mtlLoader.load('static/model/car.mtl', (materials) => {
            objLoader.setMaterials(materials)
            objLoader.load('static/model/car.obj', (obj) => {
              obj.scale.set(20, 20, 20) // 网格模型缩放
              const bbox = new THREE.Box3().setFromObject(obj)
    
              var carHead = 5617 // 车头长度 = (bbox.max.z - bbox.min.z)/2 - 7866
              this.carLength = bbox.max.z - bbox.min.z - carHead // 车箱长度,不含车头
              this.carHeight = bbox.max.x - bbox.min.x
              this.carWidth = bbox.max.y - bbox.min.y
              var difx = (bbox.max.x - bbox.min.x) / 2
              obj.rotation.y = -Math.PI / 2
              obj.translateZ(-7866)
              obj.translateY(-2500)
              obj.translateX(2500)
              this.scene.add(obj)
            })
          })
        },
        initControls() {
          // x 红 y 绿 z 蓝
          this.controls = new OrbitControls(this.camera, this.renderer.domElement) // 创建控件对象
          var axes = new THREE.AxisHelper(6000)
          this.scene.add(axes)
        },
        animation() {
          requestAnimationFrame(this.animation)
          this.controls.update()
          this.renderer.render(this.scene, this.camera)
        },
        onLoading() {
          this.drawPackage(pageData)
        },
        drawPackage(data) {
          const carData = data.container
          const packData = data.boxlist
          packData.forEach((item) => {
            var realVirtualRatio = Math.min(this.carWidth / carData.width, this.carHeight / carData.height, this.carLength / carData.length)
            var goodsLength = item.length * realVirtualRatio
            var goodsWidth = item.width * realVirtualRatio
            var goodsHeight = item.height * realVirtualRatio
            var goodsX = item.x * realVirtualRatio
            var goodsY = item.y * realVirtualRatio
            var goodsZ = item.z * realVirtualRatio
            const box = new THREE.BoxGeometry(goodsLength, goodsWidth, goodsHeight)
            const Mesh = new THREE.MeshLambertMaterial({
              color: item.color,
            })
            // 画出网格图形并且定义材质(颜色)
            var MeshItem = new THREE.Mesh(box, Mesh)
            MeshItem.uuid = item.boxId
            MeshItem.type = item.type
            MeshItem.position.copy(new THREE.Vector3(goodsX + goodsLength / 2, goodsY + goodsWidth / 2, goodsZ + goodsHeight / 2))
            MeshItem.castShadow = !0
            MeshItem.receiveShadow = !0
            this.scene.add(MeshItem)
          })
        },
      }
    }
    

    装车后的效果

    展开全文
  • threejs实现3D展馆

    2021-10-24 01:17:00
    实现展馆的方式有多种 1:单纯全景图 2:单展馆模型 3:类似贝壳或者某model上那种 利用建模+全景 过度效果 第一种很简单,不过这个全景图还得靠专业设备去采集,能搞这种 还不如直接搞3了。 于是 应赵老板之...

    实现展馆的方式有多种

    1:单纯全景图

    2:单展馆模型

    3:类似贝壳或者某model上那种 利用建模+全景 过度效果

    第一种很简单,不过这个全景图还得靠专业设备去采集,能搞这种 还不如直接搞3了。

    于是

    应赵老板之邀,使用建模的方式做成展馆编辑器

    1:建模人员建展馆模型

    2:编辑模式--将模型拖入编辑器中,可以打点 编辑展馆内 隔热点、物品、画展信息

    3:预览模型--可以预览编辑好的展馆

    代码并不复杂

    主要就是 通过打点 计算出 当前标榜法向 然后计算出 最佳看点

    记录看点后,拖拽图片修改标榜信息

    拖拽视频可以作为信息弹窗 iframe弹窗等

    先基于网上的模型,简单做了个demo,然后基于这个demo做成编辑器...

    demo地址:@跃焱邵隼

    (实际项目产物恕不开源,仅提供demo展示)

    展开全文
  • 主要样式来自代号[K] 的“JS实现3D轮播图样式” 这篇文章 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

    看到个3D轮播图,但功能较单一,就加了点功能,大家相互学习学习。

    主要样式来自 代号[K] 的“JS实现3D轮播图样式” 这篇文章

     

     HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>3D轮播图</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="box">
            <div class="wrapper">
                <img src="./img/1.jpg" class="image">
                <img src="./img/2.jpg" class="image">
                <img src="./img/3.jpg" class="image">
                <img src="./img/4.jpg" class="image">
                <img src="./img/5.jpg" class="image">
            </div>
            <div class="btn" id="btn">
                <span class="left"><</span>
                <span class="right">></span>
            </div>
            <ul class="point"></ul>
        </div>
        <script src="index.js"></script>
    </body>
    </html>

    CSS

    * {
        margin: 0;
        padding: 0;
    }
    .box {
        position: relative;
        /* width: 1500px;
        height: 400px; */
        width: 100%;
        height: 100%;
        top: 200px;
        margin: auto;
    }
    .wrapper{
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #eee;
        perspective: 800px;
        transform-style: preserve-3d;
    }
    .image{
        float: left;
        width: 300px;
        height: 200px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border-radius: 8px;
        transition: transform 1s ease-in-out;
    }
    
    /* 左右按钮 */
    .btn{
    	position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -25px);
        width: 1250px;
        z-index: 999
    }
    .btn .left,
    .btn .right {
        position: absolute;
        width: 50px;
        height: 50px;
        font-size: 30px;
        text-align: center;
        cursor: pointer;
        color: white;
        line-height: 50px;
        border-radius: 50%;
        background-color: rgba(0,0,0,0.4);
    }
    .btn .left {
        left: 0;
    }
    .btn .right {
        right: 0;
    }
    .btn span:hover {
        background-color: rgba(0,0,0,0.7);
    }
    
    /* 小圆圈 */
    .point{
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translate(-50%, 200px);
    	height: 14px;
        z-index: 999
    
    }
    .point>li {
        list-style: none;
    	width: 14px;
    	height: 14px;
    	border-radius: 50%;
    	background-color: white;
    	float: left;
    	margin: 0 2px;
    	border: 2px solid rgb(160, 162, 167);
    	box-sizing: border-box;
    }
    .point .current {
        border: 2px solid rgb(70, 71, 71);
        background-color: rgb(119, 116, 116);
    }

    JS

    var imgs = document.getElementsByTagName("img");
    var btns = document.getElementsByTagName("span");
    var ul = document.getElementsByTagName("ul");
    var lis = document.getElementsByTagName("li");
    var len = imgs.length;
    var current = 0;
    let flag = true;
    var timer;
    
    function wrapper() {
        frount();
        bind();
        getLi();
        btnClick();
        showLis();
        autoplay();
    };
    wrapper();
    
    // 图片移动
    function frount() {
        var mlen = Math.floor(len / 2);
        var limg, rimg;
        for (var i = 0; i < mlen; i++) {
            limg = len + current - i - 1;
            rimg = current + i + 1;
            if (limg >= len) {
                limg -= len;
            }
            if (rimg >= len) {
                rimg -= len; 
            }
            imgs[limg].style.transform = `translateX(` + (150) * (i + 1) + `px) translateZ(` + (200 - i * 100) + `px) rotateY(-30deg)`;
            imgs[rimg].style.transform = `translateX(` + (-150) * (i + 1) + `px) translateZ(` + (200 - i * 100) + `px) rotateY(30deg)`;
        }
        imgs[current].style.transform = `translateZ(300px)`;
        
    };
    
    // 点击图片
    function bind() {
        for (var i = 0; i < len; i++) {
            (function (i) {
                imgs[i].onclick = function () {
                    current = i;
                    frount();
                    autoLi();
                }
            })(i);
            imgs[i].onmouseenter = function () {
                clearInterval(timer);
            }
            imgs[i].onmouseout = function () {
                autoplay();
            }
        }
    };
    
    // 自动更换图片
    function autoplay() {
        timer = setInterval(function () {
            if (current >= len - 1) {
                current = 0;
            } else {
                current++;
            }
            frount();
            autoLi();
        }, 2000)
    }
    
    // 点击左右按钮
    function btnClick() {
        for (var i = 0; i < btns.length; i++) {
            (function (i) {
                btns[i].onclick = function () {
                    if (!flag) { return; }
                    flag = false;
                    // 左按钮
                    if(i==0){
                        if (current <= 0) {
                            current = len - 1;
                        } else {
                            current--;
                        }
                    }
                    // 右按钮
                    if(i==1){
                        if (current >= len - 1) {
                            current = 0;
                        } else {
                            current++;
                        }
                        
                    }
                    setTimeout(() => {
                        flag = true;
                    }, 800);
                    frount();
                    autoLi();
                }
            })(i);
            btns[i].onmouseenter = function () {
                clearInterval(timer);
            }
            btns[i].onmouseout = function () {
                autoplay();
            }
        }
    };
    
    // 点击小圆圈
    function getLi (){
        for(var i = 0; i < len; i++){
            (function (i) {
                ul[0].innerHTML +="<li></li>"
                }
            )(i);
        }
        lis[0].classList.add("current")
    }
    
    function showLis() {
        for (var i = 0; i < len; i++) {
            (function (i) {
                lis[i].onclick = function () {
                    // 排他思想
                    for (var k = 0; k < len; k++) {
                        lis[k].classList.remove("current")
                    }
                    this.classList.add("current")
                    current = i;
                    frount();
                }
            })(i);
            lis[i].onmouseenter = function () {
                clearInterval(timer);
            }
            lis[i].onmouseout = function () {
                autoplay();
            }
        }
    }
    function autoLi() {
        for (var i = 0; i < len; i++) {
            if (i == current) {
                lis[i].classList.add("current")
            } else {
                lis[i].className = '';
            }
        }
    }

    展开全文
  • Vue里使用three.js实现3D模型小案例 1、下载three.js包 npm install three --save 或者 yarn add three --save 2、组件代码 <template> <div> <div id="container"></div> </div&...

    Vue里使用three.js实现3D模型小案例

    1、下载three.js包

    npm install three --save
    

    或者

    yarn add three --save
    

    在这里插入图片描述
    2、组件代码

    <template>
      <div>
        <div id="container"></div>
      </div>
    </template>
    
    <script>
      import * as Three from 'three'
      export default {
        name: 'ThreeJS',
        data() {
          return {
            camera: null,
            scene: null,
            renderer: null,
            mesh: null
          }
        },
        methods: {
          init: function() {
            let container = document.getElementById('container');
    
            this.camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
            this.camera.position.z = 1;
    
            this.scene = new Three.Scene();
    
            let geometry = new Three.BoxGeometry(0.8, 0.8, 0.8);
            let material = new Three.MeshNormalMaterial();
    
            this.mesh = new Three.Mesh(geometry, material);
            this.scene.add(this.mesh);
    
            this.renderer = new Three.WebGLRenderer({antialias: true});
            this.renderer.setSize(container.clientWidth, container.clientHeight);
            container.appendChild(this.renderer.domElement);
    
          },
          animate: function() {
            requestAnimationFrame(this.animate);
            this.mesh.rotation.x += 0.01;
            this.mesh.rotation.y += 0.02;
            this.renderer.render(this.scene, this.camera);
          }
        },
        mounted() {
          this.init();
          this.animate()
        }
      }
    </script>
    <style scoped>
      #container {
        height: 800px;
      }
    </style>
    
    

    3、实现效果截图

    在这里插入图片描述
    兄弟萌 冲冲冲

    展开全文
  • 仅供学习使用,利用THREE.JS、GLSL实现,圆形扫描、立体扫描、区域高亮、横向扫描、地图飞线、地面线路、珠海市模型导入。未来将接入真实路况数据,AI语音控制场景功能 预览地址:http://noxussj.top:12000 如有...
  • js实现3D粒子酷炫动态旋转特效(效果比较酷炫,中途不仅有形态的变换,还有颜色的变化,希望大家能够喜欢)代码实现过程中的静态截图 New Document html,body{margin:0px;width:100%;height:100%;overflow:hidden;...
  • 使用html+css+js实现3D相册,快来上传的照片吧推荐:《js基础教程》效果图:代码如下,复制即可用:Titlehtml,body {margin: 0;padding: 0;background-color: #29454d;/*禁止文字被选中*/-moz-user-select: none;/*...
  • js实现3D旋转效果

    2021-03-16 21:58:17
    本文实例为大家分享了js实现3D旋转效果的具体代码,供大家参考,具体内容如下实现效果:实现过程:步骤一:先写一个简单的html结构,创建一个box盒子,里面放对应的图片(也可以用js创建图片,这里为了好理解,我们直接用...
  • // 引入three.js相关插件 npm install three --save // 安装轨道控件插件 npm install three-orbit-controls //安装加载.obj和.mtl文件的插件: npm i --save three-obj-mtl-loader // 安装渲染器插件: npm ...
  • 本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效。分享给大家供大家参考。具体如下:这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码,实现过程很简单。运行效果图:-------------------查看效果 ...
  • three.js在vue中的使用: three官方文档. 如需要源码,可留言联系我 链接: 关 于 G L T F 文 件 引 入 下 一 篇 会 用 到 , 点 击 跳 转 \color{#FF3030}{关于GLTF文件引入下一篇会用到,点击跳转} 关于GLTF文件引入...
  • 原生js实现3D轮播图

    2021-06-13 13:20:41
    3D轮播图是我做过复杂的图片轮播了,由于是利用坐标,层级之间的关系,所以实现起来原理比较简单但是bug巨多,在推推拖拖了好久后,下定决心重新整理成博客,与大家分享!首先分析一下3D图片轮播的功能需求:和其它...
  • js实现图片3D轮播效果

    2021-06-12 04:31:16
    效果预览:html代码:js实现3D图片逐张轮播幻灯片ul#bcty365_nav{padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1;}ul#bcty365_nav li{float:left; dis...
  • html+css+js实现3D相册

    2021-06-09 06:45:17
    # html+css+js实现3D相册使用html+css+js实现3D相册,快来上传的照片吧效果图:![a7362b45aade7d05d79ba6654dbc601.png]![](/images/1591545255504.png)代码如下,复制即可用:```htmlTitlehtml,body {margin: 0;...
  • 今天给大家带来的是 用three.js实现3d星空动画特效源码大家可以按照自己的意愿进行修改,改成自己喜欢的模样!若是有想文件版源码的可以进HTML5前端技术交流 522323792好了,上源码!JS:var vertexHeight = 15000;...
  • 基础结构搭建 3D场景创建 设置创建环境光源 3D Camera创建 3D汽车模型加载 执行渲染程序 完整代码
  • 3D效果* {background-color: #000;}.container {border: 1px solid yellow;perspective: 800px;overflow: hidden;}.box {position: relative;border: 1px solid #f00;width: 133px;height: 200px;margin: 300px auto...
  • //此处为兼容模型组合插件three-js-csg, 使用 0.107.0 版本 npm install three@0.107.0 -S 加载.obj和.mtl文件的插件 // 加载外部obj和mtl所需 npm install three-obj-mtl-loader -S 渲染器插件 npm install ...
  • My first three.js app* { margin: 0; }canvas { width:100%; height: 100%;}var iswireframe = false;varscene , camera , renderer;var fov = 75, //拍摄距离 视野角值越大,场景中的物体越小near = 1,//相机离视...
  • js实现3D照片墙效果

    2021-06-11 02:20:26
    聊一下心得:CSS写得好,真的可以省很多js代码哈,写起来也简单很多,所以要好好掌握js哈,所以这里也提供了css代码,如果您觉得您的css写得不错,可以直接看js代码哦效果:1、点击Start View进入照片墙2、只有一张...
  • CSS+JS实现3D盒子

    2021-03-24 11:15:13
    1.首先必须对3d坐标足够熟悉,如下图 初始页面在xy所在页面,默认3d转换中心在图的中点。 2.我们需要构成6个页面,形成一个正方形,代码如下 <!DOCTYPE html> <html lang="en"> <head> <...
  • 本文主要给大家介绍了关于利用Three.js开发实现3D地图的实践过程,文中通过示例代码介绍的非常详细,对大家学习或者使用three.js具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。希望能帮助到...
  • 本文实例讲述了javascript实现3D变换的立体圆圈。分享给大家供大家参考。具体如下:这里使用javascript实现会变换的立体圆圈,在网页3D变化,变色的圆圈特效,网页上的3d圆圈特效。圆圈上的每一点的颜色并不一样,在...
  • JavaScript语言:JaveScriptBabelCoffeeScript确定function getMat(color) {// our material is a phong material, with no shininess (highlight) and a black specularreturn new THREE.MeshPhongMaterial({color:...
  • 主要代码实现: 部分CSS样式: background: url(../img/s3.jpg); background-size: 100% 100%; opacity: 0.8; transform: rotateY(90deg) translateZ(200px); } .box .box1 .left { background: url(../...
  • 本文实例讲述了深入解析JS实现3D标签云的原理与方法。分享给大家供大家参考,具体如下:最近开始用canvas搞3D了,搞得也是简单的东西,就是球体转圈。做出来后,突然想起以前看过的3D标签云,在以前觉得真心狂拽酷炫...
  • padding:0;background-color:#29454d;/*禁止文字被选中*/-moz-user-select:none;/*火狐*/-webkit-user-select:none;/*webkit浏览器*/-ms-user-select:none;/*IE10*/-khtml-user-select:none;/*早期浏览器*/us...
  • 效果演示: 代码目录: 主要代码实现: 部分CSS样式: .cube { width: 100%; height: 100%; } @font-face { font-family: "RubikExtended"; src: url("../media/RubikExtended.ttf") format( "truetype"), url(".....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 66,804
精华内容 26,721
关键字:

js实现3d