精华内容
下载资源
问答
  • 一开始接触Three.js是非常蒙的,结合网上的一些教程以及自身对3dmax的一点点了解,开始了Three.js的探索。 注:只引入了three.min.js 发光球体的辉光效果 //导入纹理 var texture = THREE.ImageUtils....

    一开始接触Three.js是非常蒙的,结合网上的一些教程以及自身对3dmax的一点点了解,开始了Three.js的探索。


    注:引用的是three.min.js


    发光球体的辉光效果

    //导入纹理
    var texture = THREE.ImageUtils.loadTexture('mt4.png', {}, function () {//引入图片为mt4.png,该图片是半透明的,类似辉光效果
        renderer.render(scene, camera);
    });
    var material = new THREE.MeshLambertMaterial({//设置texture纹理
        map: texture,
        material: 0.5,//透明度 取值0-1    transparent: true,//设置是否为透明
    });

    //设置球3,该球效果是辉光效果
    var sphere3 = new THREE.Mesh(new THREE.SphereGeometry(5, 110, 140),//半径是5,多边形拟合数,多边形拟合数
        material);//引入上面声明的材质
    sphere3.position.set(0, 0, 10);//球心的坐标位置
    var pivotPoint = new THREE.Object3D();//3d效果
    sphere3.add(pivotPoint);//向球球3 添加3d效果
    scene.add(sphere3);//添加到场景中

    //设置球4
    var sphere4 = new THREE.Mesh(new THREE.SphereGeometry(4, 40, 20),//半径是4,多边形拟合数,多边形拟合数
        new THREE.MeshLambertMaterial({//改材质是自发光球体,没有阴影的白色球体
            emissive: 0xffffff,
        }));
    sphere4.overdraw = true;//这个没啥用
    sphere4.position.set(0, 0, 10);//球心的坐标位置,和上一个球的位置一样,
    scene.add(sphere4);//添加到场景中
    
    

    设置相机的位置:

    camera.position.z = 80;//设置相机位置,x=0 y=0 z=80
    camera.lookAt(scene.position);
    document.body.appendChild(renderer.domElement);


    缩放、移动 动画:


    render();
    
    var i = 1;//动画判断参数
    
    function render() {
        //动画变大缩小
        if (i < 100) {
            sphere3.scale.x += 0.001;//球球3的x,y,z宽度统统增加
            sphere3.scale.y += 0.001;
            sphere3.scale.z += 0.001;
         
        } else if (i < 200) {
            sphere3.scale.x -= 0.001;//当到了200的时候,缩小,免得变得越来越大
            sphere3.scale.y -= 0.001;
            sphere3.scale.z -= 0.001;
        } else i = 0;
        i++;
    
    
    	sphere3.position.x += 0.01;//球球3的x坐标增加,可以实现平移效果
        renderer.render(scene, camera);//渲染场景
        requestAnimationFrame(render);//回到render方法重新渲染,得以实现上面的动画效果
    }

    接下来是完整代码(如需运行,需要three.min.js,和mt4.png 材质纹理图片(←可以直接下载这张图)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>燕小溜的教程</title>
        <script src="three.min.js"></script>
        <style>
            body {
                background: #000;
            }
    
            a {
                color: #fff;
            }
        </style>
    </head>
    </head>
    <a href="http://blog.csdn.net/yangnianbing110/article/details/51306653">http://blog.csdn.net/yangnianbing110/article/details/51306653</a><br>
    <body>
    <script type="text/javascript">
        var scene = new THREE.Scene();
        //    scene.fog=new THREE.Fog(0xffffff,0.045,100);//启用场景雾化
    
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0x000000, 1.0);//设置背景是黑的
        renderer.setSize(window.innerWidth, window.innerHeight);
    
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);//眼镜(相机)的视野大小设置
    
        //点光源
        var light = new THREE.DirectionalLight();
        light.position.set(0, 0, 80);//点光源位置,注意:这里与相机的位置是一致的
        scene.add(light);
    
        //导入纹理
        var texture = THREE.ImageUtils.loadTexture('mt4.png', {}, function () {//引入图片为mt4.png,该图片是半透明的,类似辉光效果
            renderer.render(scene, camera);
        });
        var material = new THREE.MeshLambertMaterial({//设置texture纹理
            map: texture,
            material: 0.5,//透明度 取值0-1        transparent: true,//设置是否为透明
        });
    
        //设置球3,该球效果是辉光效果
        var sphere3 = new THREE.Mesh(new THREE.SphereGeometry(5, 110, 140),//半径是5,多边形拟合数,多边形拟合数
            material);//引入上面声明的材质
        sphere3.position.set(0, 0, 10);//球心的坐标位置
        var pivotPoint = new THREE.Object3D();//3d效果
        sphere3.add(pivotPoint);//向球球3 添加3d效果
        scene.add(sphere3);
    
        //设置球4
        var sphere4 = new THREE.Mesh(new THREE.SphereGeometry(4, 40, 20),//半径是4,多边形拟合数,多边形拟合数
            new THREE.MeshLambertMaterial({//改材质是自发光球体,没有阴影的白色球体
                emissive: 0xffffff,
            }));
        sphere4.overdraw = true;//这个没啥用
        sphere4.position.set(0, 0, 10);//球心的坐标位置,和上一个球的位置一样,
        scene.add(sphere4);
    
    
        camera.position.z = 80;//设置相机位置,x=0 y=0 z=80
        camera.lookAt(scene.position);
        document.body.appendChild(renderer.domElement);
    
        render();
    
        var i = 1;//动画判断参数
    
        function render() {
            //动画变大缩小
            if (i < 100) {
                sphere3.scale.x += 0.001;
                sphere3.scale.y += 0.001;
                sphere3.scale.z += 0.001;
                sphere4.scale.x += 0.001;
                sphere4.scale.y += 0.001;
                sphere4.scale.z += 0.001;
            } else if (i < 200) {
                sphere3.scale.x -= 0.001;
                sphere3.scale.y -= 0.001;
                sphere3.scale.z -= 0.001;
                sphere4.scale.x -= 0.001;
                sphere4.scale.y -= 0.001;
                sphere4.scale.z -= 0.001;
            } else i = 0;
            i++;
    
            renderer.render(scene, camera);//渲染场景
            requestAnimationFrame(render);//回到render方法重新渲染,得以实现上面的动画效果
        }
    
    </script>
    <canvas width="1242" height="609" style="width: 1242px; height: 609px;"></canvas>
    </body>
    </html>




    展开全文
  • Three.js发光贴图 .emissiveMap

    千次阅读 2019-06-11 20:04:29
    WebGL/Threejs技术博客:查看更多文章和实战案例 在Three.js材质中,和颜色贴图属性.map对应的是颜色属性.color,和高光贴图属性.specularMap对应的是高光颜色属性.specular,与粗糙度贴图属性.roughnessMap对应是...

    Three.js自发光贴图.emissiveMap

    WebGL/Threejs技术博客:查看更多文章和实战案例

    在Three.js材质中,和颜色贴图属性.map对应的是颜色属性.color,和高光贴图属性.specularMap对应的是高光颜色属性.specular,与粗糙度贴图属性.roughnessMap对应是粗糙度属性roughness
    本文说到的自发光贴图属性.emissiveMap对应的是自发光属性.emissive

    自发光属性.emissive

    自发光属性.emissive的属性值和颜色贴图属性.map的属性值相同都是Three.js的颜色对象THREE.Color。自发光属性.emissive默认值是黑色0x000000。也就是模型默认是不发光的,如果一个模型是发光的,比如电源上一个电源灯,你可以把电源灯的材质设置为对应的发光颜色。
    大家应该都知道,支持光照的Three.js材质颜色是受光照影响的,不过材质的自发光颜色.emissive是不受光照影响的。

    自发光贴图属性.emissiveMap

    如果一个网格模型Mesh整体上是同一种颜色,直接设置颜色属性.color就可以,如果一个充电宝使用了一个网格模型Mesh来表示,这时候整个充电宝Mesh不同区域的颜色是不一样的,那就需要使用颜色贴图属性.map

    同样道理,一个充电宝Mesh不同区域有的发光,有的不发光,这时候不能使用自发光属性.emissive整体设置同样发光效果,可以通过自发光贴图属性.emissiveMap来解决。如果充电宝发光的电源灯单独使用一个Mesh表示,这种情况下可以设置.emissive即可,不需要美术导出自发光贴图,一般美术出图的时候可能会把多个零件合并为一个网格模型
    Mesh

    THree.js系统渲染的时候,颜色贴图属性.map和颜色属性.color的RGB分量会分别进行乘法运算,颜色属性.color默认值是白色0xffffff,一般设置了.map,不去要去更改.color,不过你可以尝试更改.color,比如设置为红色,你会发现模型的颜色在map的基础上会有颜色变化。

    自发光贴图属性.emissiveMap类似颜色贴图属性.map,Threejs计算材质的发光效果,会把自发光贴图属性.emissiveMap.emissive的RGB分量分别进行乘法运算。

    Three.js自发光贴图.emissiveMap无效

    如果你设置了Three.js模型材质的自发光贴图属性.emissiveMap,渲染结果中没有显示,这种情况下,你要注意下材质的自发光属性.emissive是否设置,因为Threejs渲染的时候,着色器会从自发光贴图.emissiveMap提取像素值RGB,然后和自发光.emissive的属性值相乘,而Three.js中.emissive的默认值是黑色,也就是0x000000,这种情况下,无论.emissiveMap产生的任何自发光都相当于没有。

    有一点要注意,如果没有自发光贴图.emissiveMap,千万不能把.emissive设置为白色,这样的话整个模型都会发白光,.emissiveMap一般局部是发光颜色,其它区域是黑色。局部发光颜色对应模型的某个位置,比如充电宝的电源灯。

    var mat = new THREE.MeshPhysicalMaterial({
      emissive:0xffffff,// emissive默认黑色,设置为白色
      emissiveMap: texLoader.load("./模型/emissiveMap.png"),
    })  
    
    展开全文
  • three.js模型外发光

    2020-12-07 21:22:02
    three.js模型选择描边 先看一下three.js中鼠标是如果选取目标模型元素的-点击与交互。 光线投射Raycaster methods:{ getSelectCube(event){ let raycaster = new THREE.Raycaster(); let mouse = new THREE....

    three.js模型选择描边

    先看一下three.js中鼠标是如果选取目标模型元素的-点击与交互。

    光线投射Raycaster
        methods:{
            getSelectCube(event){
            	let raycaster = new THREE.Raycaster();
                let mouse = new THREE.Vector2();
                mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
                raycaster.setFromCamera( mouse, camera );
                let intersects = raycaster.intersectObjects(this.scene.children);
                for(let i=0;i<intersects.length;i++){
                    intersects[i].object.material.color.set(0xff0000);
                }
            },
            
        },
        mounted(){
            window.addEventListener('mousemove',this.getSelectCube(e),false);
        }    
    
    选择描边
    import {EffectComposer} from ...
    import {EffRenderPass} from ...
    import {OutlinePass} from ...
    import {TWEEN} from ...
    import {ShaderPass} from ...
    import {FXAAShader} from ...
    import {GLTFLoader} from ...
    
    data(){
        reutrn {
            composer:null,
            outlinePass:null,
            moveSelectedObj:null,
            selectedObjects : [],
        }
    },
    methods:{
    	init(){
            //描边
            this.composer = new EffectComposer(this.renderer);
            let renderPass = new RenderPass(this.scene,this.camera);
            this.composer.addPass(renderPass);
            this.outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth,window.innerHeight),this.scene,this.camera);
            this.composer.addPass(this.outlinePass);
            this.outlinePass,visibleEdgeColor.set('#3042fc');
            this.outlinePass.edgeStrength = 4;
            this.outlinePass.edgeGlow = 0;
            this.outlinePass.edgeThickness = 1.6;
            this.outlinePass.pulsePeriod = 0;
            
            // 抗锯齿
            let effectFXAA = new ShaderPass(FXAAShader);
            effectFXAA.uniforms['resolution'].value.set(1/window.innerWidth,1/window.innerHeight);
            composer.addPass(FXAAShaderPass);
        },
        getSelectModel(event){
         	let raycaster = new THREE.Raycaster();
            let mouse = new THREE.Vector2();
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
            raycaster.setFromCamera( mouse, camera );
            let intersects = raycaster.intersectObjects(this.scene.children);
            for(let i=0;i<intersects.length;i++){
                intersects[i].object.material.color.set(0xff0000);
            }
            return intersects;
        },
        addSelectedObject(obj){
    	    this.selectedObjects = [];
    	    this.selectedObjects.push(obj);
        },
        mouseMoveEvent(e){
            let moveIntersects;
            this.outlinePass.edgeStrength = 4;
            this.outlinePass.edgeGlow = 0;
            this.outlinePass.edgeThickness = 1.6;
            this.outlinePass.pulsePeriod = 0;
            moveIntersects = this.getSelectModel(e);
            if(moveIntersects && moveIntersects.length>0){
        	    this.moveSelectedObj = moveIntersects[0].object;
        	    this.addSelectedObject(this.moveSelectedObj);
        	    this.outlinePass.selectedObjects = this.selectedObjects;
            }
        },
        animate(){
            this.controls.undate();
            TWEEN.update();
            requestAnimationFrame(this.animate);
            // this.renderer.render(this.scene, this.camera);
            this.composer.render();
        }
    },
    mounted(){
        this.init();
        this.animate();
    }
    
    展开全文
  • 106版本 加入了单体发光的DEMO 大家快去体验吧 之前自己写的 发现别人的代码 结构就很清晰 自己的一团浆糊 -v- 都有点不想用自己的了 webgl_postprocessing_unreal_bloom_selective ...threejs交流群511163089 ...

    106版本 加入了单体发光的DEMO

    大家快去体验吧 

    之前自己写的 发现别人的代码 结构就很清晰 自己的一团浆糊

    -v- 都有点不想用自己的了

    webgl_postprocessing_unreal_bloom_selective 文件名 大家体验一下吧

     

     

     

     

     

     

    threejs交流群511163089

    展开全文
  • 目录 效果图(颜色和呼吸灯时间可调节): 1.本例子是在vue中实现,引入依赖文件: 2.data中定义全局变量 3.必须在render()方法中执行composer....import * as THREE from 'three' import { EffectComposer } f.
  • 创建阅读Three js发光的材料,我们可以用meshphongmaterial材料可配置的镜面,颜色,发光,和光亮。镜面反射属性定义光应用于材料的最轻的颜色,颜色的属性定义的物质基础颜色和发光性能,确定材料颜色的阴影。 ...
  • rthreejs, 用于 R 和发光Three.js 部件 Three.js 和 R用于 R 和发光Three.js 部件。 软件包包括graphjs: 交互式网络可视化小部件scatterplot3js: 类似于scatterplot3d函数但比函数更有限的3-d 散点图globej
  • 我们都知道,眼睛之所以能够看到某个物体,是因为物体本身能够发光或者物体能够反射其它的物体所发的光,这些光进入到我们的眼里就形成了该物体影像。倒影形成也是一种光学的现象,其原理是物体发射或者反射的光经过...
  • threeJS单击模型高亮 文章目录系列文章目录前言一、引入依赖文件二、使用步骤1.创建效果组合器(EffectComposer)2.创建场景通道(RenderPass)3.创建物体边缘发光通道(OutlinePass)4.创建自定义着色器通道...
  • script src="../js/three.js"></script> <script src="../js/OrbitControls.js"></script> <script src="../js/postprocessing/EffectComposer.js"></script> <script ...
  • Three.js做了个字体的粒子系统动画,且`自定义性`极高,设置speedX=speedY=speedZ=1000的参数,截图如下: 预览地址:...
  • 我们都知道,眼睛之所以能够看到某个物体,是因为物体本身能够发光或者物体能够反射其它的物体所发的光,这些光进入到我们的眼里就形成了该物体影像。倒影形成也是一种光学的现象,其原理是物体发射或者反射的光经过...
  • 25 Three.js的点光源THREE.PointLight

    千次阅读 2017-08-17 00:00:48
    介绍 Three.js库中的THREE.PointLight...案例查看地址:http://www.wjceo.com/blog/threejs/2018-02-12/27.html THREE.PointLight的相关属性 属性 描述 color(颜色) 光源的颜色,详情见上一节 dis...
  • 我在前面那篇博客里面已经介绍了如何让用户与 3D 场景中的组件交互(其实这个技术应该比较成熟了,只是我自己还不熟),所以这篇呢,主要是介绍一下 THREEJS 中的后期处理通道(ShaderPass)以及特效合成器...
  • three.js光源

    2019-12-17 15:53:24
    ①基本光源THREE.AmbientLight 属性为color 使用此光源时,此光源的颜色将会应用到全局,即场景中的所有物体都有这种光源的颜色,通常不能将它...单点发光,用于照射所有方向,不会生成阴影。color定义颜色,dis...
  • 关于 threejs 加载fbx 材质是黑色 没有贴图 的问题

    千次阅读 热门讨论 2019-06-04 13:14:20
    材质是黑色的原因不是丢贴图,也不是颜色错了,而是发光通道的问题,默认用的材质MeshPhongMaterial 或者fbx自己有指定 MeshLambertMaterial 这时候我也不知道为什么如果不开发光通道你的材质就会黑.... 把发光颜色 ...
  • 整如你所记得的,THREE.Points基于几何体的顶点来渲染每个粒子。...这个发光的粒子是我们使用canvas绘制出来的。在案例中查看代码方法generateSprite。 然后我们又书写了两个方法,一个是生成正常...
  • 而聚光灯(spotlight)就像手电筒或者像舞台上的探照灯,效果是一个锥形的发光区域。相比于点光源,它有照射的近场区,远场区,和发散系数。点光源属性var spotLight=new THREE.SpotLight({color:"#f2f"}); ...
  • 案例查看地址:http://www.wjceo.com/blog/threejs/2018-05-03/158.html 简介 计算环境的反光效果对CPU耗费是非常大,而且通常会使用光线追踪算法。在Three.js中你依然可以实现发光的效果,只不过是做一个假的。...
  • 案例查看地址:http://www.wjceo.com/blog/threejs/2018-05-03/160.html 简介 我们可以通过设置高光贴图来实现部分区域反光。通过设置高光贴图,我们会发现,只有海洋部分会有发光,而陆地部分没有高光的效果。 ...
  • Three.js - 设置高光贴图

    千次阅读 2018-09-06 16:55:42
    通过高光贴图可以实现部分...http://www.ithanmang.com/threeJs/home/201809/20180906/02-specular-texture.html 效果 可以通过调节颜色,来让海洋反射出不同的色彩 2、实现步骤 2.1、设置材质的specularMa...
  • three.js 通过 Reflector.js 创建镜面反射

    千次阅读 2018-10-18 10:58:02
    类似境面反射可以使用CubeCamera但是...使用Reflector.js可以很容易的创建一面镜子,并且镜子中的对象会依据发光体的缩放而缩放,而且可以调试镜子的发光色,类似墨镜的效果。   2、使用步骤 2.1、引入j...
  • 这个单个对象还能半透明发光 不过半透明看着。。我感觉是么有实心的看起来亮 图上是实心的效果 然后深度冲突的问题得看看怎么解决。 解决掉遮挡的问题了。 之后需要看看U3D UE4的处理手法 感觉我这个发光太朴素...
  • 类似境面反射可以使用CubeCamera但是CubeCamera更...使用Reflector.js可以很容易的创建一面镜子,并且镜子中的对象会依据发光体的缩放而缩放,而且可以调试镜子的发光色,类似墨镜的效果。 1、示例 示例 http://...
  • 最近研究了一下Three.js发现功能很强大,把之前写过的太阳系改造成3D版本,效果还不错,废话少说,直接上图: 下面我来简单的介绍一下实现过程。太阳系包含太阳,8大行星及其它们各自的卫星,在此着重介绍下地月...

空空如也

空空如也

1 2 3
收藏数 51
精华内容 20
关键字:

threejs发光