web 3d引擎

最新推荐文章于 2024-07-07 11:31:22 发布
最新推荐文章于 2024-07-07 11:31:22 发布
阅读量3.6k 收藏 1
点赞数
分类专栏： 前端开发专题 文章标签： web function date 引擎 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/withiter/article/details/7304836
版权

http://www.cssass.com/blog/index.php/2012/1266.html


使用three.js库，在页面中导入显示3D模型。

Java代码   收藏代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8" />  
  5. <title>MGA-411 Mangusa</title>  
  6.     <script type="text/javascript" charset="utf-8" src="http://www.cssass.com/blog/resource/threejs/three.js"></script>  
  7.     <style>body{overflow:hidden;background:#000}</style>  
  8. </head>  
  9. <body>  
  10.     <div id="Loading" style="color:#fff">Loading...</div>  
  11. </body>  
  12.     <script>  
  13.     /* 场景 */  
  14.     var WIDTH = document.documentElement.offsetWidth || 800,  
  15.         HEIGHT = document.documentElement.clientHeight || 600;  
  16.     var scene = new THREE.Scene();  
  17.     /* 摄像头 */  
  18.     var VIEW_ANGLE = 75,  
  19.         ASPECT = WIDTH / HEIGHT,  
  20.         NEAR = 0.1,  
  21.         FAR = 10000;  
  22.     var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);  
  23.         camera.position.set(0, 0, 1000);  
  24.         scene.add(camera);  
  25.     /* 渲染器 */  
  26.     var renderer = new THREE.WebGLRenderer();  
  27.         renderer.setSize(WIDTH , HEIGHT);  
  28.         document.body.appendChild(renderer.domElement);  
  29.     /* 灯光 */  
  30.     var light = new THREE.DirectionalLight(0xFFFFFF);  
  31.         light.position.set(0, 0, 99).normalize();  
  32.         scene.add(light);  
  33.     /* 显示对象 */  
  34.     var material = new THREE.MeshLambertMaterial({ color: 0xcccccc, wireframe: true }),  
  35.         obj;  
  36.     var loader = new THREE.JSONLoader(true);  
  37.     loader.load("http://www.cssass.com/blog/resource/threejs/model/MGA.js", function ( geometry ) {  
  38.         var loading = document.getElementById("Loading");  
  39.         loading.parentNode.removeChild(loading);  
  40.         obj = new THREE.Mesh(geometry, material);  
  41.         obj.position.set(0,1,990);  
  42.         scene.add(obj);  
  43.         var start = new Date().getTime(),delta;  
  44.         (function anime(){  
  45.             delta = new Date().getTime() - start;  
  46.             obj.rotation.y =   delta / 1000;  
  47.             renderer.render(scene, camera);  
  48.             return requestAnimationFrame(anime);  
  49.         })();  
  50.     });  
  51. </script>  
  52. </html>  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MGA-411 Mangusa</title>
    <script type="text/javascript" charset="utf-8" src="http://www.cssass.com/blog/resource/threejs/three.js"></script>
	<style>body{overflow:hidden;background:#000}</style>
</head>
<body>
	<div id="Loading" style="color:#fff">Loading...</div>
</body>
	<script>
	/* 场景 */
	var WIDTH = document.documentElement.offsetWidth || 800,
		HEIGHT = document.documentElement.clientHeight || 600;
	var scene = new THREE.Scene();
	/* 摄像头 */
	var VIEW_ANGLE = 75,
		ASPECT = WIDTH / HEIGHT,
		NEAR = 0.1,
		FAR = 10000;
	var	camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
		camera.position.set(0, 0, 1000);
		scene.add(camera);
	/* 渲染器 */
	var	renderer = new THREE.WebGLRenderer();
		renderer.setSize(WIDTH , HEIGHT);
		document.body.appendChild(renderer.domElement);
	/* 灯光 */
	var light = new THREE.DirectionalLight(0xFFFFFF);
		light.position.set(0, 0, 99).normalize();
		scene.add(light);
	/* 显示对象 */
	var material = new THREE.MeshLambertMaterial({ color: 0xcccccc, wireframe: true }),
		obj;
	var loader = new THREE.JSONLoader(true);
    loader.load("http://www.cssass.com/blog/resource/threejs/model/MGA.js", function ( geometry ) {
		var loading = document.getElementById("Loading");
		loading.parentNode.removeChild(loading);
		obj = new THREE.Mesh(geometry, material);
		obj.position.set(0,1,990);
		scene.add(obj);
		var start = new Date().getTime(),delta;
		(function anime(){
			delta = new Date().getTime() - start;
			obj.rotation.y =   delta / 1000;
			renderer.render(scene, camera);
			return requestAnimationFrame(anime);
		})();
	});
</script>
</html>


预览地址： http://www.cssass.com/blog/index.php/2012/1266.html


teemai
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web 3D 框架简介
通达的博客
05-16 1248
随着HTML5和WebGL技术的发展，3D游戏引擎开始向Web领域扩展。这使得开发者可以在浏览器中创建和运行高质量的3D游戏，而无需额外的插件。一些主要的Web 3D游戏引擎，如Three.js和Babylon.js，开始出现，并得到了广泛的使用。
WebGL 3D引擎
X01动力装甲的专栏
07-03 221
WebGL 3D引擎 glMatrix const { mat4, mat3, vec2, vec3, vec4, quat } = glMatrix; let GL = null; const _OPAQUE_VS = `#version 300 es precision highp float; uniform mat3 normalMatrix; uniform mat4 modelMatrix; uniform mat4 modelViewMatrix; uniform mat4 project
three.js(r108)前端web3d引擎 20190930更新
09-30
游戏开发、前端3d引擎。给需要下载的git比较慢的用户 https://github.com/mrdoob/three.js/
谈一谈，Web3D！
weixin_61719769的博客
03-22 1432
Web 3D 引擎是一个基于 web 开发的用于创建和渲染 3D 视觉效果的应用程序。
最受欢迎的webgl 3d引擎
yaoyutian的博客
04-03 7110
1.BabylonJS； 强调做"one of the most powerful, beautiful, and simple Web rendering engines in the world",适合做web 3d游戏，源码，同时它有一个云平台编辑器PlayGround。 不仅如此，还推出BabylonNative，BabylonReactNative ，能让你使用与babylonjs一样的javascript代码原生native运行于windows,li...
Babylon.js 一个专注web端的3D引擎，飞一般的感觉
xiao_bin_shen的博客
05-27 4575
2011年发布的 WebGL 到今年发布的 WebGPU，Web端的渲染在高速的发展中，做为一个前端你要是错过了 WebRTC， WebGL 千万别错过了 WebGPU，再不卷 3D 就老了一、Babylon是什么？世界上最强大、最漂亮、最简单的 Web 渲染引擎之一。对所有人完全开放和免费。尽可能简单，让每个人都能将他们的想法变为现实。优势：1、基于 typescript 开发，轻量，功能丰富，文档清晰，社区活跃，运营团队热情。
h5 3D框架和游戏引擎
XLL20001022的博客
06-24 796
排名前10的H5、Js 3D游戏引擎和框架 由于很多人都在用JavaScript、HTML5和WebGL技术创建基于浏览器的3D游戏，所有JavaScript 3D游戏引擎是一个人们主题。基于浏览器的游戏最棒的地方是平台独立，它们能在iOS、Android、Windows或其他任何平台上运行。 　　有很多的JavaScript能够用于创建基于浏览器、使用HTML5和WebGL的3D游戏。然...
Web 3D引擎闲谈
11-04 2934
3D开发过程中存在大量相关参数的调整，所以图形化编辑器就显得尤为重要 ThingJS ThingJS是新兴的3D框架，2018年诞生，由北京优锘科技公司研发，旨在简化3D应用开发。轻量化的表现在：1、ThingJS封装了对模型交互事件的API、对模型的操作及层次关系，一个个具体的模型抽象把初学者从复杂的3D概念中解放出来，2、加载简单场景仅需1行代码，发布方式支持iframe, 微信和PC发布，在线化更方便，3、ThingJS是一个完成的物联网可视化应用开发生态，提供CampusBuilder, CityB
蓝牛web3d引擎安装包
05-18
蓝牛Web3D引擎是一款强大的三维图形渲染工具，专门用于在Web环境中创建和展示三维虚拟现实（VR）和增强现实（AR）内容。这个安装包是为开发者提供的一整套解决方案，旨在帮助他们构建交互式的3D网页应用，提供丰富的...
HT for Web 3d引擎示例加api说明文档
12-27
HT for Web，通常简称为 HT，这是一个基于 JavaScript 开发的 WebGL 引擎。可用于 2D/3D 可视化开发，其核心文件只有一个，就是 ”ht.js”。在 index.html 中使用 script 标签进入后便可使用。 完全版本效果：...
Web3D引擎中三维图形对象拾取的算法与实现.pdf
04-29
Web3D引擎中三维图形对象拾取的算法与实现 是一篇介绍在三维引擎中拾取算法的论文，供大家在学习拾取算法时参考使用
ROYGBIV：Web的3D引擎
01-28
ROYGBIV是一个WebGL引擎，适合那些没有预算购买花哨的3D模型或获得流行引擎许可的预算但仍然希望为移动和台式机制作60 FPS Web应用程序的程序员。 这种程序员之一是在图形的THREE.js低级功能和物理学的CANNON.js之上...
zephyr3d引擎正式开源！ 新一代Web3D引擎，全面支持WebGL和WebGPU
leisuregame的博客
03-26 508
zephyr3d 浏览器3D渲染引擎，支持WebGL和WebGPU
前端中的三维技术Cesium
huangzhixin1996的博客
04-02 7143
前端中的三维技术，以及如何在Vue项目中引入Cesium，并且进行简单使用。
Web3D引擎，three.js堪称扛把子，Babylon.js差点意思。
最新发布
2401_82616673的博客
07-07 1015
它更适合有经验的开发者，可以更加自由地实现复杂的定制需求。2. 社区和生态系统：Three.js拥有一个庞大的社区和生态系统，有大量的开发者和爱好者参与其中，提供了丰富的文档、示例、教程和第三方工具。Three.js 是一个流行的开源WebGL 3D引擎，它提供了丰富的功能和文档，可以帮助开发者在Web上创建复杂的3D场景和交互式内容。- Babylon.js 提供了更多的高级功能和工具，如物理引擎、粒子系统、阴影等，使得开发者可以更快速地创建复杂的3D场景和交互式内容，同时也提供了更多的内置特性和效果。
treejs 记录心得--开篇
qq_30668513的博客
09-23 1022
最新想研究研究3D图形方面的知识，对比其他的3D引擎，还是选择了使用广泛的three.jsThree.js是一个广泛应用并且功能强大的JavaScript 3D库，从创建简单的3D动画到创建交互的3D游戏， 它都能实现。 Threejs带来的不仅是支持WebGL渲染，也支持SVG、Canvas和CSS3D渲染。然而，从游戏的角度来看，你可以只关注Threejs的WebGL渲染。 然而我选择的不是three.js的游戏功能。更注重它的支持。 ...
3D绘图 WebGl引擎----ThreeJS 3D渲染引擎
weixin_43204133的博客
03-28 967
threeJS基础学习和光照的注意事项
各类三维引擎综合概述(OpenGL、DirectX、WebGL、UE4、U3D、ACIS、ParaSolid）
热门推荐
youlinhuanyan的博客
04-04 2万+
关于OpenGL、DirectX、OpenCV OpenCV OpenCV是 Open Source Computer Vision Library 主要是提供图像处理和视频处理的基础算法库，还涉及一些机器学习的算法。比如你想实现视频的降噪、运动物体的跟踪、目标（比如人脸）的识别这些都是CV的领域。它是可以运行在Linux、Window、和Mac OS操作系统上，它是轻量级而且很高效的。 OpenGL OpenGL是 Open Graphics Library 是个定义了一个跨编程语言、跨平台的编程接口规格
HTML5游戏开发引擎
量变是质变的一小步
10-31 3227
过去两年基于H5开发的游戏也不胜枚举，放弃了之前的基于Flash的页游方式，如今跨平台跨设备变得更加便捷，加上硬件性能的提升，基于Web的应用和游戏估计会越来越多。Egret，快速开发一个2D的游戏，拥有丰富的工具级，性能稍微比LayaAir差点，官方提供了Runtime可以接入，或许会有用，基于Egret做的2D游戏上线产品还是比较多的。有了WebSocket，基于Web的游戏可以非常方便地和游戏服务器进行通信。游戏引擎包含的功能会更多，成熟的游戏引擎更会包括一系列的工具，渲染只是游戏引擎的一部分。
C# Web3D引擎
07-27
在C#中，有几个Web3D引擎可以用于在Web应用程序中创建和展示3D图形。以下是一些常用的C# Web3D引擎： 1. Unity3D：Unity3D是一个跨平台的游戏引擎，也可以用于创建Web3D应用程序。它提供了一个强大的可视化编辑器和一套丰富的工具，可以创建复杂的3D场景、物体、动画等。你可以使用Unity的C#脚本来编写逻辑和交互代码，并将项目发布为WebGL格式以在浏览器中运行。 2. Babylon.js：Babylon.js是一个基于WebGL的开源Web3D引擎，专注于游戏和图形应用程序的开发。它提供了丰富的功能和API，可以创建复杂的3D场景、粒子效果、物理模拟等。Babylon.js使用TypeScript编写，但也可以与C#进行交互，例如使用Blazor框架。 3. Helix Toolkit：Helix Toolkit是一个.NET平台上的开源3D库，包含在WPF、Windows Forms和ASP.NET中使用的版本。它提供了一组易于使用的控件和工具，用于创建和显示3D场景、模型、光照效果等。你可以使用C#代码直接与Helix Toolkit进行交互。 除了以上列出的引擎外，还有其他一些Web3D引擎可以使用，如Three.js、Cesium等。尽管它们的主要开发语言不是C#，但你仍然可以使用C#与它们进行交互，例如通过JavaScript与C#之间的互操作性。 根据你的项目需求和技术偏好，选择适合的C# Web3D引擎来开发Web应用程序中的3D图形。在使用这些引擎之前，请确保阅读其文档和示例，了解如何正确地集成和使用它们。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值