模型旁边添加 文字注释，解释模型 3D效果"/>
threejs模型旁边添加 文字注释，解释模型 3D效果
先给大家看一下 效果吧
如上面所示，这是一个 简单的dome,就是在一个立方体旁边叠加一个显示文字的 模块。
threejs制作简单的立方体这个没有什么说，基本就是
let geometry = new THREE.BoxGeometry(50, 50, 50)//构建一个正方体let material = new THREE.MeshLambertMaterial({ color: 0xffffff })//mesh = new THREE.Mesh(geometry, material)scene.add(mesh)就是一个50x50x50的立方体，这不是本次的重点。重点在于如何去设置 文字模块，大家可以在.html#manual/zh/introduction/Creating-text 网址看到
这里主要介绍了3种方法去处理 文字的显示，本次案例主要是利用了第一种纹理的形式。
下面开始制作
首页，需要理解纹理就相当于图片，所以我们的 文字必须先转换到文字，这个时候canvas就会排上用场。先使用canvas去创建一个文字
//用canvas生成图片let canvas = document.getElementById('canvas')let ctx = canvas.getContext('2d')canvas.width = 300canvas.height = 300//制作矩形ctx.fillStyle = "rgba(255,165,0,0.8)";ctx.fillRect(0, 0, 300, 300)上面的 代码创建了一个矩形，接着在创建文字
//设置文字ctx.fillStyle = "#fff";ctx.font = 'normal 18pt "楷体"'ctx.fillText('模型介绍', 100, 20)let textWord = '该模型由小少小同学制作完成'//文字换行let len = parseInt(textWord.length / 10)for (let i = 0; i < (len + 1); i++) {let space = 10if (i === len) {space = textWord.length - len * 10}console.log('len+' + len, 'space+' + space)let word = textWord.substr(i * 10, space)ctx.fillText(word, 15, 60*(i+1))}上面的代码时生成文字的，换行那个 主要时拍页面显示不下所以使用了换行，换行只是改变了一下 呈现的位置
第二步 就是将文字生成图片
//生成图片let url = canvas.toDataURL('image/png');第三步 就是将生成的图片放入到 纹理中
//将图片构建到纹理中let geometry1 = new THREE.PlaneGeometry(30, 30)let texture = THREE.ImageUtils.loadTexture(url, null, function (t) {})let material1 = new THREE.MeshBasicMaterial({map: texture,side: THREE.DoubleSide,opacity: 1,transparent: true,})let rect = new THREE.Mesh(geometry1, material1)rect.position.set(43, 40, 25)scene.add(rect)这样基本就算 制作完成了
下面时完整的代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>webgl入门</title><script src="./build/three.js" type="text/javascript"></script><script src="./examples/js/controls/OrbitControls.js"></script><script src="./examples/js/loaders/SVGLoader.js"></script><link href="css/test.css" rel="stylesheet"><style>body {margin: 0;}</style>
</head>
<body onload="main();">
<canvas id="canvas" style="display: none;">你的浏览器不支持canvas</canvas>
</body>
<script>
let scene, camera, renderer, light, mesh, controls//初始化渲染器
function initRenderer () {renderer = new THREE.WebGLRenderer({ antialias: true })renderer.setPixelRatio(window.devicePixelRatio)renderer.setSize(window.innerWidth, window.innerHeight)//渲染大小document.body.appendChild(renderer.domElement)renderer.setClearColor(0xFFFFFF, 1.0)//渲染背景颜色}//初始化相机
function initCamera () {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000)camera.position.set(10, 5, 20)
}//初始化场景
function initScene () {scene = new THREE.Scene()scene.background = new THREE.Color(0xf0f0f0)let axesHelper = new THREE.AxesHelper(50)scene.add(axesHelper)
}//初始化光线
function initLight () {//环境光light = new THREE.AmbientLight(0x00ff00)scene.add(light)//方向光light = new THREE.DirectionalLight(0xff0000, 1)light.position.set(0, 0, 1)scene.add(light)
}//构建物体
function initObject () {let geometry = new THREE.BoxGeometry(50, 50, 50)//构建一个正方体let material = new THREE.MeshLambertMaterial({ color: 0xffffff })//mesh = new THREE.Mesh(geometry, material)scene.add(mesh)//用canvas生成图片let canvas = document.getElementById('canvas')let ctx = canvas.getContext('2d')canvas.width = 300canvas.height = 300//制作矩形ctx.fillStyle = "rgba(255,165,0,0.8)";ctx.fillRect(0, 0, 300, 300)//设置文字ctx.fillStyle = "#fff";ctx.font = 'normal 18pt "楷体"'ctx.fillText('模型介绍', 100, 20)let textWord = '该模型由小少小同学制作完成'//文字换行let len = parseInt(textWord.length / 10)for (let i = 0; i < (len + 1); i++) {let space = 10if (i === len) {space = textWord.length - len * 10}console.log('len+' + len, 'space+' + space)let word = textWord.substr(i * 10, space)ctx.fillText(word, 15, 60*(i+1))}//生成图片let url = canvas.toDataURL('image/png');//将图片构建到纹理中let geometry1 = new THREE.PlaneGeometry(30, 30)let texture = THREE.ImageUtils.loadTexture(url, null, function (t) {})let material1 = new THREE.MeshBasicMaterial({map: texture,side: THREE.DoubleSide,opacity: 1,transparent: true,})let rect = new THREE.Mesh(geometry1, material1)rect.position.set(43, 40, 25)scene.add(rect)}//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
function initControls () {controls = new THREE.OrbitControls(camera)// 如果使用animate方法时，将此函数删除//controls.addEventListener( 'change', render );// 使动画循环使用时阻尼或自转 意思是否有惯性controls.enableDamping = true//动态阻尼系数 就是鼠标拖拽旋转灵敏度//controls.dampingFactor = 0.25;//是否可以缩放controls.enableZoom = true//是否自动旋转//controls.autoRotate = true;//设置相机距离原点的最远距离controls.minDistance = 200//设置相机距离原点的最远距离controls.maxDistance = 600//是否开启右键拖拽controls.enablePan = true
}function animate () {//更新控制器controls.update()requestAnimationFrame(animate)renderer.render(scene, camera)
}function main () {initRenderer()//渲染器initCamera()//相机initScene()//场景initLight()//光线initObject()//物体initControls()animate()//动画
}</script></body>
</html>
希望大家不懂的 可以提问，也希望大家可以点一个赞
更多推荐
threejs模型旁边添加 文字注释,解释模型 3D效果
发布评论