SVG表現3D圖形

阿新 • • 發佈：2019-01-13

<desc>An interactive 3d model.</desc>

[CDATA[

var FontScalar =8//10

//var ChargeScale = 0.8

var Dimensions =200

var CameraDistance = Dimensions *2

var HitherPlane = CameraDistance /20

var MouseScalar = .005

var MinMouseSpeed = .01

var MouseMoveAverage = .3

var MaxRotationalSpeed = .05

var RotationsPerCycle =4

var ApproachRange =3* RotationsPerCycle

var BondSpread =3

var MinTurnIncrement = .0001

var ShadowDistance = Dimensions /4

var radio =3;

var SVGDocument =null

var Rotating =true

var Scale =1

var XOffset =0

var YOffset =0

var ZOffset =0

var MinX =0

var MaxX =0

var MinY =0

var MaxY =0

var MinZ =0

var MaxZ =0

var Theta =0;

var Phi =0;

var ThrownTheta =0;

var ThrownPhi =0;

var Atoms =new Array();

var Bonds =new Array();

var debugFlag =true; //My debug flag;

function Initialize(LoadEvent)

{

SVGDocument = LoadEvent.getTarget().getOwnerDocument();

GenerateStructure();

if(debugFlag == true)

{

s=printNode(SVGDocument.getElementById("atoms"));

alert(s);

debugFlag = false;

}

function Atom(x, y, z, fillStyle)

{

FixRange(x, y, z)

if (x !=null) this.x = x;

if (y !=null) this.y = y;

if (z !=null) this.z = z;

this.SVG = SVGDocument.createElement("circle");

this.SVG.setAttributeNS(null,"fill", fillStyle);

//this.SVG.setAttributeNS(null,"filter","url(#dropShadow)");

SVGDocument.getElementById("atoms").appendChild(this.SVG);

Atoms[Atoms.length] =this; //Save to array

this.refresh();

returnthis;

}

Atom.prototype.x =0;

Atom.prototype.y =0;

Atom.prototype.z =0;

Atom.prototype.bonds =new Array();

Atom.prototype.element ="";

Atom.prototype.displayPhi =0;

Atom.prototype.displayTheta =0;

Atom.prototype.distanceScalar =1;

Atom.prototype.refresh = Atom_Refresh;

Atom.prototype.fixCoords = Atom_FixCoordinates;

Atom.prototype.calculateRotation = Atom_CalculateRotation

function Atom_FixCoordinates()

{

this.x += XOffset;

this.y += YOffset;

this.z += ZOffset;

this.x =this.x * Scale;

this.y =this.y * Scale;

this.z =this.z * Scale;

this.refresh()

}

function Atom_Refresh()

{

oldx =this.x

oldy =this.y

this.calculateRotation();

if (this.SVG !=null)

{

this.SVG.setAttribute("transform", "translate("+this.displayX +", "+this.displayY +")");

this.SVG.setAttributeNS(null,"r", this.displayZ);

}

//Sort by displayZ

var elem = SVGDocument.getElementById("atoms");

var nodes = elem.getChildNodes;

var insertFlag =false;

//for(i = 1;i < ((nodes.length)-1);i += 2)

for(i =0;i < ((nodes.length-1));i ++)

{

//Compare by r attribute in SVG node

var nodeMap = nodes.item(i).attributes;

var r = nodeMap.getNamedItemNS(null, "r");

if(this.displayZ < r.nodeValue)

{

elem.insertBefore(this.SVG, nodes.item(i));

insertFlag =true;

break;

}

//The nearest one

if(insertFlag ==false)

elem.appendChild(this.SVG);

return ((oldx !=this.x) || (oldy !=this.y))

}

function Atom_CalculateRotation()

{

var clipTheta =true;

var clipPhi =true;

for (var I =1; I < RotationsPerCycle; I++)

{

dTheta = Theta -this.displayTheta;

dPhi = Phi -this.displayPhi;

SVG表現3D圖形

使用 DirectX 創建 3D 圖形

.com -h 著色器圖形 zh-cn window 鏈接 https 扁平化官方鏈接 https://msdn.microsoft.com/zh-cn/library/windows/desktop/hh465137.aspx 使用 Windows 運行時初始化

3D圖形學理論入門指南

哪裏過程規格放置技術 href 效果坐標系 related 轉：http://gad.qq.com/article/detail/35096 介紹當我還小的時候，我曾以為計算機圖形學是最酷的玩意兒。但是隨即我認識到，學習圖形學——創建那些超級

開源3D圖形渲染引擎OGRE學習筆記

參考資料：電子書：《Pro OGRE 3D Programming》中文翻譯本官方wiki: http://www.ogre3d.org/wiki/index.php/Main_Page 中文網站(有電子書下載)：http://www.ogre3d.cn/

[招聘] 上海耐斯特數字招聘3D圖形軟體工程師

公司介紹上海耐斯特數字科技有限公司成立於2018年9月，致力於為中國原創動畫、影視行業提供新一代核心技術解決方案和全流程技術服務。公司創始團隊擁有國內外領先的行業背景與資源，在DCC軟體開發方面具有深厚的經驗與前瞻的視角。現誠邀國內外優秀人才加盟，共同打造具有國際水平的技術+藝術+管理團隊。公司提供舒適的

3D 圖形程式設計的數學基礎 1 向量及其運算

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

Android OpenGL ES 簡明開發教程_真正的3D圖形

摘要：該系列文章均轉載自/content/540025.html由於原文好像無法開啟,正好自己有記錄,所以正好分享出來。Mesh(網格,三角面)是構成空間形體的基本元素,前面的正方形也是由兩個Mesh構成的。本篇將介紹使用Mesh構成四面體,椎體等基本空間形體。Design設計在使用Ope

python matlibplot繪製3D圖形

散點圖使用scatter from mpl_toolkits.mplot3d import Axes3D import numpy as np from matplotlib import pyplot as plt

svg 低面圖形的變形動畫

1.目標——低面圖形變形（難度：4.0）本期我們的目標是將三角面組成的低面圖案，通過動畫，變成另外一個低面圖案.每個三角面的位置，形狀和大小顏色都會連續變化，逐漸變成另外一個圖案的三角面！ 2.分析需求——庖丁解牛 1.低面圖形通過美術工具Triangulat

3D 圖形程式設計的數學基礎 3 矩陣基本變換

這裡開始，是真正的與3D圖形程式設計相關的知識了，前兩節只能算是純數學。平移矩陣要想將向量(x, y, z, 1)沿x軸平移個單位，沿y軸平移，沿z軸平移個單位，我們只需要將該向量與如下矩陣相乘。 N(p) = 從中可以看出4*4矩陣N中的N41,N

彈出層與embed及svg生成的圖形遮蓋問題

今天在做網頁的時候，我想在flash上放一個層，然後放圖片等內容，可是總是被flash遮擋，因此總結了一下對於這方面的問題的幾個解決方法，希望可以對朋友和自己有幫助！ 1.flash把層遮擋住了，如何處理呢？ =======================

在微信小遊戲中使用three.js顯示3D圖形

年前，微信釋出了一個重磅訊息：微信小程式的小遊戲功能，千呼萬喚始出來！筆者之前從未接觸過微信小程式和WebGL的開發，但是卻一直有留意相關技術的發展，大概聽說原來微信小程式是不支援WebGL 3D技術的。這次藉著微信大力推廣小遊戲，看了一下API文件，發現小遊戲是可以使用

將 ESXi 主機升級到 ESXi600-201706001 後，硬體 3D 圖形功能發生故障

問題：將ESXi系統版本升級到ESXi600-201706001，xorg服務無法啟動，導致硬體 3D 圖形功能發生故障。可能產生的現象：虛擬機器不再能正確使用 vSGA 或 vGPU 資源。在 Horizon View 中，使用 GRID 或硬體 3D 設定的自動化虛擬機器

3D圖形演算法基礎，吐血推薦，想了解3D數學的來看看啊！

========================================================== 這只是計算機圖形學中的一部分，算是比較關鍵的部分吧。還有2D圖形的處理，比如2D圖形的變換、羽化、銳化、亮度調整、對比度的調整，玩過Flash或者Photoshop的都有所瞭解。還有更讓

OpenGL/3D圖形渲染管線

http://blog.csdn.net/shenzi/article/details/5417488 3D圖形渲染管線什麼是渲染（Rendering）渲染簡單的理解可能可以是這樣：就是將三維物體或三維場景的描述轉化為一幅二維影象，生成的二維影象能很好

初識3D圖形庫three.js

Three.js是當下最流行的網頁3D渲染JS引擎，其主要是對WebGL程式設計以面向物件方式進行的封裝。但由於Three.js英文文件還在開發中（本身就比較簡陋且有不少拷貝錯誤），而網路上Three.js方面的資料比較散亂且良莠不齊，部分中文文件翻譯低階錯誤頻出，以

OpenGL_Qt學習筆記之_04(3D圖形的繪製和旋轉)

繪製四稜錐四稜錐由5個面構成一個封閉的立體圖,其中4個共頂點的側面是三角形,底面是個四邊形。如果我們要繪製一個3D的四稜錐只需要繪製這5個面即可，繪製的方法和前一篇文章OpenGL_Qt學習筆記之_03(平面圖形的著色和旋轉)的相同。只不過這裡的頂點座標是3維的，所以影象深度那一維不

計算機圖形學----基於3D圖形開發技術

計算機圖形學第2章第8章 col 合並第7章文獻紋理參考第1章遊戲模型第2章頂點處理機制第3章光柵化操作第4章片元處理和輸出合並第5章光照和著色第6章參數曲線和表面第7章著色器模型第8章圖像紋理第9章凹凸貼圖第10章高級紋

3D圖形:矩陣、尤拉角、四元數與方位的故事

概述又研究了將近兩個星期的3D圖形到了我最想研究的地方了,因為尤拉角與四元數的原因導致OpenGL ES的研究進度變緩,研究完這一塊,我將教大家如何使用OpenGL ES做一個自轉加公轉的正立方體.效果如下. 方向、方位與角位移的區別在說矩陣、尤拉角與四元數

OpenGL原始碼之五繪製3D圖形

#include <Windows.h> //Windows的標頭檔案 #include <gl/glut.h> //包含OpenGL實用庫 HGLRC hRC=NULL; //視窗著色描述表控制代碼 HDC hDC=NULL;//OpenGL渲染描述表控制代碼 HWND hWnd=N

SVG表現3D圖形

相關推薦