场景

Three.js入门和搭建HelloWorld：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/119149625

在上面已经能实现显示坐标轴和球体的基础上。

怎样显示立方体和平面。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

创建坐标轴对象并添加进场景

        // 创建坐标轴对象var axes = new THREE.AxisHelper(20);//将坐标轴添加进场景scene.add(axes);

创建平面对象并设置平面绕X轴旋转90度

        // 创建平面，并定义平面的尺寸var planeGeometry = new THREE.PlaneGeometry(60, 20);//创建一个基本材质，并设置颜色var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});//把两个对象合并到Mesh网格对象var plane = new THREE.Mesh(planeGeometry, planeMaterial);// 设置平面绕x轴旋转90度plane.rotation.x = -0.5 * Math.PI;// 设置平面的坐标位置plane.position.x = 15;plane.position.y = 0;plane.position.z = 0;// 将平面添加进场景scene.add(plane);

创建立方体并添加进场景

        // 创建一个立方体var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);//设置材质//把线框属性wireframe设置为truevar cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});//合并var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);// 设置立方体坐标cube.position.x = 20;cube.position.y = 12;cube.position.z = 2;// 将立方体添加进场景scene.add(cube);

创建球体并添加进场景

        // 创建一个球体var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);//把线框属性wireframe设置为truevar sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);// 设置球体的坐标sphere.position.x = 20;sphere.position.y = 4;sphere.position.z = 2;// 添加进场景scene.add(sphere);

完整的实现代码

<!DOCTYPE html><html><head><title>第一个场景的使用</title><script type="text/javascript" src="./js/three.js"></script><style>body {/* 将边距设置为0，溢出设置为隐藏，以实现全屏显示 */margin: 0;overflow: hidden;}</style>
</head>
<body><!-- 显示的div -->
<div id="WebGL-output">
</div><script type="text/javascript">// 初始化的方法function init() {// 创建一个场景，它将包含我们所有的元素，如物体，摄像机和灯光var scene = new THREE.Scene();// 创建一个相机，它定义了我们正在看的地方var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器并设置大小var renderer = new THREE.WebGLRenderer();//将renderer的背景色设置为接近白色renderer.setClearColorHex();renderer.setClearColor(new THREE.Color(0xEEEEEE));//设置大小renderer.setSize(window.innerWidth, window.innerHeight);// 创建坐标轴对象var axes = new THREE.AxisHelper(20);//将坐标轴添加进场景scene.add(axes);// 创建平面，并定义平面的尺寸var planeGeometry = new THREE.PlaneGeometry(60, 20);//创建一个基本材质，并设置颜色var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});//把两个对象合并到Mesh网格对象var plane = new THREE.Mesh(planeGeometry, planeMaterial);// 设置平面绕x轴旋转90度plane.rotation.x = -0.5 * Math.PI;// 设置平面的坐标位置plane.position.x = 15;plane.position.y = 0;plane.position.z = 0;// 将平面添加进场景scene.add(plane);// 创建一个立方体var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);//设置材质//把线框属性wireframe设置为truevar cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});//合并var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);// 设置立方体坐标cube.position.x = 20;cube.position.y = 12;cube.position.z = 2;// 将立方体添加进场景scene.add(cube);// 创建一个球体var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);//把线框属性wireframe设置为truevar sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);// 设置球体的坐标sphere.position.x = 20;sphere.position.y = 4;sphere.position.z = 2;// 添加进场景scene.add(sphere);// 定义相机的坐标，即悬挂在场景的上方camera.position.x = -30;camera.position.y = 40;camera.position.z = 30;//为了确保相机能够拍摄到这些物体，使用lookat函数指向场景的中心camera.lookAt(scene.position);// 将renderer的输出挂接到HTML终点div元素document.getElementById("WebGL-output").appendChild(renderer.domElement);// 渲染场景renderer.render(scene, camera);}window.onload = init;</script>
</body>
</html>

Three.js中显示坐标轴、平面、球体、四方体相关推荐

ggplot2中显示坐标轴_R可视化08|ggplot2图层标度图层（scale layer）图例篇
"pythonic生物人"的第106篇分享本文详细介绍ggplot2中图例标度(legends scales),续前篇 R可视化07|ggplot2图层-标度图层(scale l ...
ggplot2中显示坐标轴_qplot()——ggplot2的快速绘图
先前写过几篇用ggplot2进行基本绘图的文章,但对于初学者,或只需绘制简单图形时,这些命令显得繁琐,这里介绍ggplot2中的快速绘图函数qplot(). 此函数相对能较快速便捷地绘制图形. 往期文 ...
ggplot2中显示坐标轴_R可视化11|ggplot2-图层图形语法 (3)
本文系统介绍ggplot2的统计变换(stat).位置设置(Position adjustments)和标度(scale). 本文目录 6.统计变换(stat)stats can be created ...
js中显示一个指定html文档,JS实现选定指定HTML元素对象中指定文本内容功能示例...
本文实例讲述了JS实现选定指定HTML元素对象中指定文本内容功能.分享给大家供大家参考,具体如下: 该功能用处多多,可以灵活运用之!主要函数如下: //选中文本中指定部分 function selec ...
ggplot2中显示坐标轴_ggplot2作图：修改图中一切文本的外观
参考:<R数据可视化手册> 文本者,ggplot2中的文字也. 包括:1.坐标轴标签 2.标题 3.手动添加文本 4.映射数据的文本等一.修改坐标轴标签外观: 使用theme(axis. ...
js中如何求平面两点之间的距离
首先附上代码: // 数据可以以数组方式存储,也可以是对象方式 let a = {x:'6', y:10}, b = {x: 8, y: 20}; function distant(a,b){ let ...
Three.js中使用requestAnimationFrame方法实现立方体转动和小球跳动的动画
场景 Three.js中显示坐标轴.平面.球体.四方体: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/119150682 在上面 ...
extjs chart无法在panel中显示_手绘风格的 JS 图表库：Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
VUE.js 中取得后台原生HTML字符串原样显示问题
今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去 ...

Three.js中显示坐标轴、平面、球体、四方体

场景

实现

Three.js中显示坐标轴、平面、球体、四方体相关推荐

最新文章

热门文章