Three.js中基础材质的特殊属性案例应用（MeshBasicMaterial）

最新推荐文章于 2023-06-11 12:10:42 发布
最新推荐文章于 2023-06-11 12:10:42 发布
阅读量417 收藏
点赞数 1
分类专栏： three.js 文章标签： javascript 材质 前端 3d 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Potatoyou/article/details/127979023
版权

THREE.MeshBasicMaterial

案例

结果

在这里插入图片描述

分析

💡 熟悉所有材质的共有属性和基本材质的特殊属性

  1. 上述场景中包含着地面、三个物体（页面只显示一个，通过GUI来选择哪个物体显示）、光源、性能插件、GUI

创建场景、摄像机、渲染器

创建两个渲染器，因为wireframeLinecap（线框线段端点）、wireframeLinejoin（线框线段连接点）两个属性，webGLRenderer不支持该属性

//场景
var scene;
function initScene() {
    scene = new THREE.Scene();
}

//摄像机
var camera;
function initCamera() {
    camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000);
    camera.position.set(-20,50,40);
    camera.lookAt(new THREE.Vector3(10,0,0));
    scene.add(camera);
}
//渲染器
var webGLRenderer,canvasRenderer,renderer;
function initRenderer() {
    webGLRenderer = new THREE.WebGLRenderer();
    webGLRenderer.setClearColor(new THREE.Color(0x000000));
    webGLRenderer.setSize(window.innerWidth,window.innerHeight);
    webGLRenderer.shadowMap.enabled = true;

    canvasRenderer = new THREE.CanvasRenderer();
    canvasRenderer.setSize(window.innerWidth,window.innerHeight);

    renderer = webGLRenderer;
    //将渲染的结果添加到 HTML 框架中的div元素中　
    document.getElementById("webgl-output").appendChild(renderer.domElement);
}

添加性能插件、光源、摄像机控制器

//初始化性能插件
var stats;
function initStats(){
    stats = new Stats();
    document.getElementById("webgl-output").appendChild(stats.domElement);
}
//光源
function initLight(){
    var ambientLight = new THREE.AmbientLight(0x0c0c0c);
    scene.add(ambientLight);

    var spotLight = new THREE.SpotLight("#ffffff");
    spotLight.position.set(-40,60,-10);
    spotLight.castShadow = true;
    spotLight.shadow.mapSize = new THREE.Vector2(1024,1024);
    spotLight.shadow.camera.far = 130;
    spotLight.shadow.camera.near = 40;
    scene.add(spotLight);
}
//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
var controls;
function initControls() {
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    //是否可以缩放
    controls.enableZoom = true;
    //是否自动旋转
    controls.autoRotate = true;
    //设置相机距离原点的最远距离
    controls.minDistance  = 1;
    //设置相机距离原点的最远距离
    controls.maxDistance  = 200;
    //是否开启右键拖拽
    controls.enablePan = true;
}

添加物体对象

//模型
var axes,cube,plane,meshMaterial,sphere,ground,selectedMesh;
function initModels(){
    //坐标轴
    axes = new THREE.AxesHelper(50);
    scene.add(axes);
    //材质
    meshMaterial = new THREE.MeshBasicMaterial({
        color:0x7777ff,
        name: "Basic Material",
        flatShading: true,
    });
    //地面
    var groundGeometry = new THREE.PlaneGeometry(100,100,4,4);
    var groundMaterial = new THREE.MeshBasicMaterial({
        color:0x777777,
    })
    ground = new THREE.Mesh(groundGeometry,groundMaterial);
    ground.rotation.x = -Math.PI / 2;
    ground.position.y = -20;
    ground.receiveShadow = true;
    scene.add(ground);

    //立方体
    var cubeGeometry = new THREE.CubeGeometry(15,15,15);
    cube = new THREE.Mesh(cubeGeometry,meshMaterial);
    cube.position.set(0,3,2);
    cube.castShadow = true;
    scene.add(cube);

    //球
    var sphereGeometry = new THREE.SphereGeometry(14,20,20);
    sphere = new THREE.Mesh(sphereGeometry,meshMaterial);
    sphere.position.set(0,3,2);
    sphere.castShadow = true;
    // scene.add(sphere);

    //平面
    var planeGeometry = new THREE.PlaneGeometry(14,14,4,4);
    plane = new THREE.Mesh(planeGeometry,meshMaterial);
    plane.position = sphere.position;

    selectedMesh = cube;

}

设置GUI

var MBM,MaterialGui,gui;
function initMBM(){
    MBM = cube.material;
    MBM = new function(){
        this.id = cube.id;
        this.uuid = cube.uuid;
        this.name = "Basic Material";
        this.opacity = meshMaterial.opacity;
        this.transparent = meshMaterial.transparent;
        this.overdraw = meshMaterial.overdraw;
        this.visible = meshMaterial.visible;
        this.side = "FrontSide";
        this.colorWrite = meshMaterial.colorWrite;
        this.flatShading = meshMaterial.flatShading;
        this.premultipliedAlpha = meshMaterial.premultipliedAlpha;
        this.dithering = meshMaterial.dithering;
        this.shadowSide = "";
        this.vertexColors = "NoColors";
        this.fog = true;

        this.color = meshMaterial.color.getStyle();
        this.wireframe = meshMaterial.wireframe;
        this.wireframeLinewidth = 6.9;
        this.wireframeLinecap = "round";
        this.wireframeLinejoin = "round";

        this.switchRenderer = function () {
            if (renderer instanceof THREE.WebGLRenderer) {
                renderer = canvasRenderer;
                document.getElementById("webgl-output").innerHTML = '';
                document.getElementById("webgl-output").appendChild(renderer.domElement);
            } else {
                renderer = webGLRenderer;
                document.getElementById("webgl-output").innerHTML = '';
                document.getElementById("webgl-output").appendChild(renderer.domElement);
            }
        }
        this.selectedMesh = "cube";
    };
    gui = new dat.GUI();
    MaterialGui = gui.addFolder("THREE.Material");
    MaterialGui.add(MBM,'id');
    MaterialGui.add(MBM,'uuid');
    MaterialGui.add(MBM,'name');
    MaterialGui.add(MBM,'opacity',0,1,0.01).onChange(function (e){
        meshMaterial.opacity = e;
    });
    MaterialGui.add(MBM,'transparent').onChange(function (e){
        meshMaterial.transparent = e;
    });
    MaterialGui.add(MBM,'overdraw',0,1,0.01).onChange(function (e){
        meshMaterial.overdraw = e;
    });
    MaterialGui.add(MBM,'visible').onChange(function (e){
        meshMaterial.visible = e;
    });
    MaterialGui.add(MBM,'side',{FrontSide:0,BackSide:1,BothSides:2}).onChange(function (e){
        meshMaterial.side = parseInt(e);
    });
    MaterialGui.add(MBM,'colorWrite').onChange(function (e){
        meshMaterial.colorWrite = e;
    });
    MaterialGui.add(MBM,'flatShading').onChange(function (e){
        meshMaterial.flatShading = e;
        meshMaterial.needsUpdate = true;
    });
    MaterialGui.add(MBM,'premultipliedAlpha').onChange(function (e){
        meshMaterial.premultipliedAlpha = e;
    });
    MaterialGui.add(MBM,'dithering').onChange(function (e){
        meshMaterial.dithering = e;
    });
    MaterialGui.add(MBM,'shadowSide',{FrontSide:0,BackSide:1,BothSide:2}).onChange(function (e){
       meshMaterial.shadowSide = parseInt(e);
    });
    MaterialGui.add(MBM,'vertexColors', {NoColors: THREE.NoColors, FaceColors: THREE.FaceColors,
        VertexColors: THREE.VertexColors}).onChange(function (vertexColors) {
        meshMaterial.vertexColors = parseInt(vertexColors);
    });
    MaterialGui.add(MBM,'fog');
    //THREE.MeshBasicMaterialGUI
    var MeshBasicMaterialGUI = gui.addFolder("THREE.MeshBasicMaterial");

    MeshBasicMaterialGUI.addColor(MBM,'color').onChange(function (e) {
        meshMaterial.color.getStyle(e);
    });
    MeshBasicMaterialGUI.add(MBM,'wireframe').onChange(function (e) {
        meshMaterial.wireframe = e;
    });
    MeshBasicMaterialGUI.add(MBM,'wireframeLinewidth',0,20).onChange(function (e){
        meshMaterial.wireframeLinewidth = e;
    });
    MeshBasicMaterialGUI.add(MBM,'wireframeLinecap',['butt','round','square']).onChange(function (e) {
        meshMaterial.wireframeLinecap = e;
    });
    MeshBasicMaterialGUI.add(MBM,'wireframeLinejoin',['round','bevel','miter']).onChange(function (e) {
        meshMaterial.wireframeLinejoin = e;
    });

    gui.add(MBM,'switchRenderer');

    gui.add(MBM,'selectedMesh',['cube','sphere','plane']).onChange(function (e){
        scene.remove(cube);
        scene.remove(sphere);
        scene.remove(plane);

        switch (e){
            case 'cube':
                scene.add(cube);
                selectedMesh = cube;
                break;
            case 'sphere':
                scene.add(sphere);
                selectedMesh = sphere;
                break;
            case 'plane':
                scene.add(plane);
                selectedMesh = plane;
                break;
        }
    });
}

正确渲染以及窗口自适应函数

function render() {
    renderer.render(scene,camera);
}

function animate(){
    stats.update();

    selectedMesh.rotation.y +=0.02;
    render();

    requestAnimationFrame(animate);
}

//窗口自适应
function windowOnresize(){
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth,window.innerHeight);
}

完整代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name=viewport
		  content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
	<script type="text/javascript" src="../libs/three/three.js"></script>
	<script type="text/javascript" src="../libs/three/controls/OrbitControls.js"></script>
	<script type="text/javascript" src="../libs/three/renderers/CanvasRenderer.js"></script>
	<script type="text/javascript" src="../libs/three/renderers/Projector.js"></script>
	<script type="text/javascript" src="../libs/util/dat.gui.js"></script>
	<script type="text/javascript" src="../libs/util/Stats.js"></script>
	<script type="text/javascript" src="js/MeshBasicMaterial.js"></script>
	<link rel="stylesheet" href="../css/default.css">
	<title>Title</title>
	<style></style>
	<script></script>
</head>
<body>
	<div id="webgl-output">

	</div>
	<script type="text/javascript">
		(function (){
			draw()
		})();
	</script>
</body>
</html>

//场景
var scene;
function initScene() {
    scene = new THREE.Scene();
}

//摄像机
var camera;
function initCamera() {
    camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000);
    camera.position.set(-20,50,40);
    camera.lookAt(new THREE.Vector3(10,0,0));
    scene.add(camera);
}
//渲染器
var webGLRenderer,canvasRenderer,renderer;
function initRenderer() {
    webGLRenderer = new THREE.WebGLRenderer();
    webGLRenderer.setClearColor(new THREE.Color(0x000000));
    webGLRenderer.setSize(window.innerWidth,window.innerHeight);
    webGLRenderer.shadowMap.enabled = true;

    canvasRenderer = new THREE.CanvasRenderer();
    canvasRenderer.setSize(window.innerWidth,window.innerHeight);

    renderer = webGLRenderer;
    //将渲染的结果添加到 HTML 框架中的div元素中　
    document.getElementById("webgl-output").appendChild(renderer.domElement);
}
//初始化性能插件
var stats;
function initStats(){
    stats = new Stats();
    document.getElementById("webgl-output").appendChild(stats.domElement);
}
//光源
function initLight(){
    var ambientLight = new THREE.AmbientLight(0x0c0c0c);
    scene.add(ambientLight);

    var spotLight = new THREE.SpotLight("#ffffff");
    spotLight.position.set(-40,60,-10);
    spotLight.castShadow = true;
    spotLight.shadow.mapSize = new THREE.Vector2(1024,1024);
    spotLight.shadow.camera.far = 130;
    spotLight.shadow.camera.near = 40;
    scene.add(spotLight);
}

//模型
var axes,cube,plane,meshMaterial,sphere,ground,selectedMesh;
function initModels(){
    //坐标轴
    axes = new THREE.AxesHelper(50);
    scene.add(axes);
    //材质
    meshMaterial = new THREE.MeshBasicMaterial({
        color:0x7777ff,
        name: "Basic Material",
        flatShading: true,
    });
    //地面
    var groundGeometry = new THREE.PlaneGeometry(100,100,4,4);
    var groundMaterial = new THREE.MeshBasicMaterial({
        color:0x777777,
    })
    ground = new THREE.Mesh(groundGeometry,groundMaterial);
    ground.rotation.x = -Math.PI / 2;
    ground.position.y = -20;
    ground.receiveShadow = true;
    scene.add(ground);

    //立方体
    var cubeGeometry = new THREE.CubeGeometry(15,15,15);
    cube = new THREE.Mesh(cubeGeometry,meshMaterial);
    cube.position.set(0,3,2);
    cube.castShadow = true;
    scene.add(cube);

    //球
    var sphereGeometry = new THREE.SphereGeometry(14,20,20);
    sphere = new THREE.Mesh(sphereGeometry,meshMaterial);
    sphere.position.set(0,3,2);
    sphere.castShadow = true;
    // scene.add(sphere);

    //平面
    var planeGeometry = new THREE.PlaneGeometry(14,14,4,4);
    plane = new THREE.Mesh(planeGeometry,meshMaterial);
    plane.position = sphere.position;

    selectedMesh = cube;

}

//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
var controls;
function initControls() {

    controls = new THREE.OrbitControls( camera, renderer.domElement );

    // 如果使用animate方法时，将此函数删除
    //controls.addEventListener( 'change', render );
    // 使动画循环使用时阻尼或自转 意思是否有惯性
    controls.enableDamping = true;
    //动态阻尼系数 就是鼠标拖拽旋转灵敏度
    //controls.dampingFactor = 0.25;
    //是否可以缩放
    controls.enableZoom = true;
    //是否自动旋转
    controls.autoRotate = true;
    //设置相机距离原点的最远距离
    controls.minDistance  = 1;
    //设置相机距离原点的最远距离
    controls.maxDistance  = 200;
    //是否开启右键拖拽
    controls.enablePan = true;
}

function render() {
    renderer.render(scene,camera);
}

function animate(){
    stats.update();

    selectedMesh.rotation.y +=0.02;
    render();

    requestAnimationFrame(animate);
}

//窗口自适应
function windowOnresize(){
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth,window.innerHeight);
}

var MBM,MaterialGui,gui;
function initMBM(){
    MBM = cube.material;
    MBM = new function(){
        this.id = cube.id;
        this.uuid = cube.uuid;
        this.name = "Basic Material";
        this.opacity = meshMaterial.opacity;
        this.transparent = meshMaterial.transparent;
        this.overdraw = meshMaterial.overdraw;
        this.visible = meshMaterial.visible;
        this.side = "FrontSide";
        this.colorWrite = meshMaterial.colorWrite;
        this.flatShading = meshMaterial.flatShading;
        this.premultipliedAlpha = meshMaterial.premultipliedAlpha;
        this.dithering = meshMaterial.dithering;
        this.shadowSide = "";
        this.vertexColors = "NoColors";
        this.fog = true;

        this.color = meshMaterial.color.getStyle();
        this.wireframe = meshMaterial.wireframe;
        this.wireframeLinewidth = 6.9;
        this.wireframeLinecap = "round";
        this.wireframeLinejoin = "round";

        this.switchRenderer = function () {
            if (renderer instanceof THREE.WebGLRenderer) {
                renderer = canvasRenderer;
                document.getElementById("webgl-output").innerHTML = '';
                document.getElementById("webgl-output").appendChild(renderer.domElement);
            } else {
                renderer = webGLRenderer;
                document.getElementById("webgl-output").innerHTML = '';
                document.getElementById("webgl-output").appendChild(renderer.domElement);
            }
        }
        this.selectedMesh = "cube";
    };
    gui = new dat.GUI();
    MaterialGui = gui.addFolder("THREE.Material");
    MaterialGui.add(MBM,'id');
    MaterialGui.add(MBM,'uuid');
    MaterialGui.add(MBM,'name');
    MaterialGui.add(MBM,'opacity',0,1,0.01).onChange(function (e){
        meshMaterial.opacity = e;
    });
    MaterialGui.add(MBM,'transparent').onChange(function (e){
        meshMaterial.transparent = e;
    });
    MaterialGui.add(MBM,'overdraw',0,1,0.01).onChange(function (e){
        meshMaterial.overdraw = e;
    });
    MaterialGui.add(MBM,'visible').onChange(function (e){
        meshMaterial.visible = e;
    });
    MaterialGui.add(MBM,'side',{FrontSide:0,BackSide:1,BothSides:2}).onChange(function (e){
        meshMaterial.side = parseInt(e);
    });
    MaterialGui.add(MBM,'colorWrite').onChange(function (e){
        meshMaterial.colorWrite = e;
    });
    MaterialGui.add(MBM,'flatShading').onChange(function (e){
        meshMaterial.flatShading = e;
        meshMaterial.needsUpdate = true;
    });
    MaterialGui.add(MBM,'premultipliedAlpha').onChange(function (e){
        meshMaterial.premultipliedAlpha = e;
    });
    MaterialGui.add(MBM,'dithering').onChange(function (e){
        meshMaterial.dithering = e;
    });
    MaterialGui.add(MBM,'shadowSide',{FrontSide:0,BackSide:1,BothSide:2}).onChange(function (e){
       meshMaterial.shadowSide = parseInt(e);
    });
    MaterialGui.add(MBM,'vertexColors', {NoColors: THREE.NoColors, FaceColors: THREE.FaceColors,
        VertexColors: THREE.VertexColors}).onChange(function (vertexColors) {
        meshMaterial.vertexColors = parseInt(vertexColors);
    });
    MaterialGui.add(MBM,'fog');
    //THREE.MeshBasicMaterialGUI
    var MeshBasicMaterialGUI = gui.addFolder("THREE.MeshBasicMaterial");

    MeshBasicMaterialGUI.addColor(MBM,'color').onChange(function (e) {
        meshMaterial.color.getStyle(e);
    });
    MeshBasicMaterialGUI.add(MBM,'wireframe').onChange(function (e) {
        meshMaterial.wireframe = e;
    });
    MeshBasicMaterialGUI.add(MBM,'wireframeLinewidth',0,20).onChange(function (e){
        meshMaterial.wireframeLinewidth = e;
    });
    MeshBasicMaterialGUI.add(MBM,'wireframeLinecap',['butt','round','square']).onChange(function (e) {
        meshMaterial.wireframeLinecap = e;
    });
    MeshBasicMaterialGUI.add(MBM,'wireframeLinejoin',['round','bevel','miter']).onChange(function (e) {
        meshMaterial.wireframeLinejoin = e;
    });

    gui.add(MBM,'switchRenderer');

    gui.add(MBM,'selectedMesh',['cube','sphere','plane']).onChange(function (e){
        scene.remove(cube);
        scene.remove(sphere);
        scene.remove(plane);

        switch (e){
            case 'cube':
                scene.add(cube);
                selectedMesh = cube;
                break;
            case 'sphere':
                scene.add(sphere);
                selectedMesh = sphere;
                break;
            case 'plane':
                scene.add(plane);
                selectedMesh = plane;
                break;
        }
    });
    // gui.domElement.style.position = 'absolute';
    // gui.domElement.style.right = "300px";
}


function draw(){
    initScene();
    initCamera();
    initRenderer();
    initStats();
    initLight();
    initModels();
    initControls();
    initMBM();

    animate();
    window.onresize = windowOnresize;
}

注意事项

💡这个例子里可以设置side属性，通过这个属性可以指定THREE.Geometry对象的哪个面应用材质。

  • 可以通过选择plane(平面)网格验证该属性。
  • side属性设置为FrontSide或者BackSide时，平面旋转时会有一半的时间看不见。
  • side属性设置为BothSides时，这个平面始终都能看见（因为几何体两面都有材质）。
  • 设置为BothSides时，由于两面都有材质，所以渲染需要做更多的工作，对场景的性能会有影响。
请往我的生活里加满快乐
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用three.js 画渐变的直线
10-22
主要介绍了使用three.js 画渐变的直线的相关资料以及具体的实例代码，有需要的小伙伴可以参考下
three.js材质分类，网格基础材质MeshBasicMaterial属性介绍和使用(vue中使用three.js11)
点燃火柴的博客
09-14 4604
材质分类及MeshBasicMaterial材质使用一、材质的分类1.1网格基础材质-MeshBasicMaterial1.2网格深度材质-MeshDepthMaterial1.3网格法向材质-MeshNormalMaterial1.4网格面材质-MeshFaceMaterial1.5网格朗伯材质-MeshLamberMaterial1.6网格Phong材质-MeshPhongMaterial1.7着色器材质-ShaderMaterial1.8直线基础材质-LineBasicMaterial1.9虚线-Li
Three.js-材质纹理详解
damadashen的博客
07-09 2094
从基础网格材质(MeshBasicMaterial)及标准网格材质(MeshStandardMaterial)中讲解关于物体材质纹理的设置。
Threejs材质的使用
weixin_51236754的博客
02-20 5483
前言：材质就像物体的皮肤，决定几何体的外表。例如：定义一个几何体看起来是否像金属，透明与否，或者显示为线框，得到THREEJS.Mesh对象添加到Threejs渲染的场景中。
three.js 04-01 之 MeshBasicMaterial 材质
zhulx_sz 的博客
11-24 6514
前面我们用了六篇文章分别介绍了 three.js 中的各种光源。从本篇开始，我们将深入探讨一下 three.js 中各种常用材质。大体有如下表所示几种常用的材质： 名称 描述 MeshBasicMaterial （网格基础材质） 基础材质，可以用它赋予几何体一种简单的颜色，或者显示几何体的线框 MeshDepthMaterial （网格深度材质）
three.js之材质-MeshPhongMaterial介绍和使用(vue中使用three.js17)
点燃火柴的博客
11-09 6624
MeshPhongMaterial材质介绍和使用1.MeshPhongMaterial材质介绍2.demo说明3.demo代码 1.MeshPhongMaterial材质介绍 MeshPhongMaterial材质可以创建一种光亮的材质，可以使用的属性和MeshLambertMaterial材质基本一样，可以配置的其他属性有color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLinewidth、wireframeLin
Three.js中网格对象MESH的属性与方法详解
01-19
本文主要给大家介绍了关于Three.js网格对象MESH的属性与方法，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍： 创建一个网格需要一个几何体，以及一个或多个材质。当网格创建好之后，我们就可以将...
THREE.JS开发指南及书中案例
02-02
第2章讲解Three.js库使用过程中所要了解的各种基础组件，包括光源、网格、几何体、材质和相机等；第3章通过具体示例讲解场景中使用的各种光源；第4章讨论Three.js库中可以应用于网格的各种材质，并通过互动示例让...
three.js着色器材质的内置变量示例详解
10-14
主要给大家介绍了关于three.js着色器材质内置变量的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
21-THREE.JS 将法线矢量映射到RGB颜色的材质
weixin_30920597的博客
10-31 210
<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script> <script src="htt...
three.js学习笔记（一）：THREE.Materail五种基础材质的使用
qq_43641110的博客
02-10 3573
THREE.Materail五种基础材质的基本使用：属性介绍，代码示例
MeshBasicMaterial 网格基础材质
aprildove的博客
09-21 4817
threejs翻译 MeshBasicMaterial 网格基础材质
《Three.js 开发指南第 2 版》读书笔记 2
xld的博客
04-27 291
《Three.js 开发指南第 2 版》读书笔记 2 书本源码地址：https://github.com/josdirksen/learning-threejs 文章目录《Three.js 开发指南第 2 版》读书笔记 2第 3 章 学习使用 Three.js 中的光源不同种类的光源THREE. AmbientLightTHREE. ColorTHREE. PointLightTHREE. SpotLightTHREE. DirectionalLishtTHREE. HemisphereLightTHREE
Threejs入门之十二：认识Threejs中的材质
九仞山的专栏
04-04 1689
介绍了Threejs中常用的材质类
Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质配有效果图)
仙魁XAN
04-25 9743
Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质有效果图) 目录 Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质配有效果图) 一、简单介绍 二、各种材质说明 1、MeshBasicMaterial 基础网格材质 2、MeshDepthMaterial 深度网格材质 3、MeshDistanceMaterial 距离网格材质 4、MeshLambertMaterial Lambert网格材质 5、MeshMatcapMat
【Three.js】第十二章 Materials 材质
最新发布
m0_68324632的博客
06-11 1463
材质用于为几何体的每个可见像素着色。决定每个像素颜色的算法属于着色器中编写的。编写着色器是 WebGL 和 Three.js 最具挑战性的部分之一，但不要担心；Three.js 有许多带有预制着色器的内置材质。我们将在以后的课程中探索如何创建我们自己的着色器。现在，让我们使用 Three.js 自带材料。
Threejs之MeshBasicMaterial
zhanghuaiwei
03-30 296
Threejs之MeshBasicMaterial（基本几何体）
给一个vue下的three.js基础案例
03-25
A：下面是一个使用Vue和Three.js创建基本场景的示例： ``` <div ref="canvasWrapper"></div> import * as THREE from 'three'; export default { mounted() { // 初始化场景、相机、渲染器 const scene = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值